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 PropertiesPROPERTY | 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 & 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.
| |