javascript

Chapter 11: DOM Levels 2 and 3
Element Dimensions
The following properties and methods are not part of the DOM Level 2 Style specification but are
nonetheless related to styles on HTML elements. The DOM stops short of describing ways to determine
the actual dimensions of elements on a page. IE first introduced several properties to expose
dimension information to developers. These properties have now been incorporated into all of the major
browsers.
Offset Dimensions
The first set of properties deals with offset dimensions , which incorporate all of the visual space that an
element takes up on the screen. An element ’ s visual space on the page is made up of its height and
width, including all padding, scrollbars, and borders (but not including margins). The following four
properties are used to retrieve offset dimensions:
❑
❑
❑
❑
offsetHeight — The amount of vertical space, in pixels, taken up by the element, including its
height, the height of a horizontal scrollbar (if visible), the top border height, and the bottom
border height
offsetLeft — The number of pixels between the element ’ s outside left border and the
containing element ’ s inside left border
offsetTop — The number of pixels between the element ’ s outside top border and the
containing element ’ s inside top border
offsetWidth — The amount of horizontal space taken up by the element, including its width,
the width of a vertical scrollbar (if visible), the left border width, and the right border width
The offsetLeft and offsetTop properties are in relation to the containing element, which is stored
in the offsetParent property. The offsetParent may not necessarily be the same as the parentNode .
For example, the offsetParent of a < td > element is the < table > element that it ’ s an ancestor of,
because the < table > is the first element in the hierarchy that provides dimensions. Figure 11-1 illustrates
the various dimensions these properties represent.
offsetParent
offsetTop
offsetLeft
border
padding
content
offsetHeight
offsetWidth
Figure 11 - 1
336