javascript

Chapter 11: DOM Levels 2 and 3
offsetParent
border
padding
content
clientHeight
clientWidth
Figure 11-2
The client dimensions are literally the amount of space inside of the element, so the space taken up by
scrollbars is not counted. The most common use of these properties is to determine the browser viewport
size, as discussed in Chapter 8 . This is done by using the clientWidth and clientHeight of document
.documentElement or document.body (in IE versions prior to 7), as shown in the following example:
function getViewport(){
if (document.compatMode == “BackCompat”){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
};
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
}
This function determines whether or not the browser is running in quirks mode by checking the document
.compatMode property. Safari prior to version 3.1 doesn ’ t support this property, so it will automatically
continue execution in the else statement. Chrome, Opera, and Firefox run in standards mode most of the
time, so they will also continue to the else statement. The function returns an object with two properties:
width and height . These represent the dimensions of the viewport (the < html > or < body > elements).
As with offset dimensions, client dimensions are read - only and are calculated each
time they are accessed.
338