Determining an Object s Properties


Determining an Object's Properties

The Document Object Model lets you connect scripts to the objects on your page, so it's possible to learn a wide range of information about that object.

The basic technique for finding this information is the same, regardless of the information you seek. Figure 14.4 shows the basic structure for accessing the properties inherent in HTML elements. First begin by getting the object by its ID, which you do in the same way as you did with elements in Chapter 12 (see "Getting an Element" in Chapter 12). Then use one of the property keywords from Table 14.1.

Figure 14.4. The general syntax for finding an element's HTML property value.


Table 14.1. DOM Element Properties

PROPERTY

DESCRIPTION

className

Gets/sets the class of an element

clientHeight[*]

Gets height of an element, including padding, and scrollbar

clientWidth[*]

Gets width of an element, including padding, and scrollbar

id

Gets/sets the ID of an element

innerHTML[*]

Gets/sets the mark-up and content in an element

lang

Gets language of an element

name

Gets/sets the name of an element

offsetHeight[*]

Gets height of element, including border, padding, and scrollbar

offsetLeft

Gets/sets position from left edge of parent

offsetParent

Gets first-positioned parent of element

offsetTop

Gets/sets position from top edge of parent

offsetWidth[*]

Gets width of element, including border, padding, and scrollbar

scrollHeight[*]

Gets total height of element discounting scroll

scrollLeft[*]

Gets number of pixels element is scrolled left

scrollTop[*]

Gets number of pixels element is scrolled upward

scrollWidth[*]

Gets total height of element discounting scroll

style

Gets a style value (e.g., style.width)

tabIndex

Gets/sets tab order of element


[*] Not currently part of the W3C DOM Specification, but in wide use.

As an example of how this works, let's look at finding the width and height of a given object.

All objects have a width and height that determine their dimensions (see "Understanding an Element's Box" in Chapter 6). For images, the width and height are an intrinsic part of the object. For most objects you'll be using the width and height styles to set their dimensions. However, to then find the width and height of an object using JavaScript, you'll use the offsetWidth and offsetHeight properties.

In this example (Figure 14.5), clicking any of the objects displays an alert showing that object's width and height.

Figure 14.5. An alert appears, telling you the dimensions of the object. Keep in mind, though that this includes the padding and border, in addition to the width and height set in the CSS.


To find the width and height of an object:

1.

function findWidth(objectID) {...}


Add the functions findWidth() and findHeight() to your JavaScript (Code 14.2).

Code 14.2. The functions findWidth() and FindHeight() return the dimensions of an individual object on the page.

[View full width]

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3 .org/TR/xhtml1 /DTD/xhtml1-strict.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  <title>CSS, DHTML &amp; Ajax | Determining An Object's Properties</title>  <script type="text/javascript">  function findWidth(objectID) {       var object = document.getElementById(objectID);       if (object.offsetWidth)          return object.offsetWidth;       return (null);  }  function findHeight(objectID) {       var object = document.getElementById(objectID);       if (object.offsetHeight)          return object.offsetHeight;       return (null);  }  function showDim(evt) {       var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id  : null);       if (objectID) {          widthObj = findWidth(objectID);          heightObj = findHeight(objectID);          alert('Width: ' + widthObj + 'px; Height: ' + heightObj + 'px' );       }       else return (null);  }  </script>  <style type="text/css" media="screen">  .dropBox {       position: absolute;       text-align: right;       padding: 4px;       background-color: #FFFFFF;       border: 2px solid #f00;       cursor: pointer; }  #object1 {       z-index: 3;       top: 285px; left: 315px;       background: white url(alice22a.gif) no-repeat;       height:220px; width:150px; }  #object2 {       z-index: 2;       top: 210px; left: 210px;       background: white url(alice15a.gif) no-repeat;       height:264px; width:200px;}  #object3 {       z-index: 1;       top: 105px; left: 105px;       background: white url(alice28a.gif) no-repeat;       height:336px; width:250px; }  #object4 {       z-index: 0;       top: 5px; left: 5px;       background: white url(alice30a.gif) no-repeat;       height:408px; width:300px; }  </style>  </head>  <body>  <div   onclick="showDim(event)"> Object 1</div>  <div   onclick="showDim(event)"> Object 2</div>  <div   onclick="showDim(event)"> Object 3</div>  <div   onclick="showDim(event)"> Object 4</div>  </body></html>

These functions use the ID of the object to be addressedpassed to it as the variable objectIDto locate the object. It then uses feature sensing to check that offsetWidth and offsetHeight work in the current browser and returns the object's width and height if they do.

2.

function showDim(evt) {...}


Add a JavaScript function that uses the functions you created in Step 1. In this example, showDim() first finds the ID of the triggering object using the evt variable:

var objectID = (evt.target) ? evt.target.id : ((evt.srcElement) ? evt.srcElement.id : null);


It then passes this value to findWidth() and findHeight(), displaying the values they return in an alert.

3.

#object1 {...}


Set up the CSS rules for your object(s) with the properties you need. You will use these to define the objects in your HTML code.

4.

onclick="showDim(event);"


Add an event handler to trigger the function you created in Step 2, and pass to it the event.




CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net