JavaScript: The Definitive Guide, Sixth Editio javaScript权威指南(第6版) pdf 文字版-文字版, javascript电子书, 和javascript 有关的电子书:

15.8.5 More on Element Size, Position and Overflow

The behavior of scrollIntoView() is similar to what the browser does when you set window.location.hash to the name of a named anchor (an element).

15.8.5 More on Element Size, Position and Overflow

The getBoundingClientRect()method is defined in all current browsers, but if you need to support an older generation of browsers, you can’t rely on this method and must use older techniques for determining element size and position. Element size is easy: the readonly offsetWidth and offsetHeight properties of any HTML element return its on screen size, in CSS pixels. The returned sizes include the element border and padding but not margins.

All HTML elements have offsetLeft and offsetTop properties that return the X and Y coordinates of the element. For many elements, these values are document coordinates and directly specify the position of the element. But for descendants of positioned elements and for some other elements, such as table cells, these properties return coordinates that are relative to an ancestor element rather than the document. The offset Parent property specifies which element the properties are relative to. If offsetParent is null, the properties are document coordinates. In general, therefore, computing the position of an element e using offsetLeft and offsetTop requires a loop:

function getElementPosition(e) {

var x = 0, y = 0;

while(e != null) {

x += e.offsetLeft;

y += e.offsetTop;

e = e.offsetParent; } return {x:x, y:y};


By looping through the offsetParent chain and accumulating offsets, this function computes the document coordinates of the specified element. (Recall that getBounding ClientRect() returns viewport coordinates instead.) This is not the final word on element positioning, however—this getElementPosition()function does not always compute the correct values, and we’ll see how to fix it below.

In addition to the set of offset properties, all document elements define two other sets of properties, one whose names begin with client and one whose names begin with scroll. That is, every HTML element has all of the following properties:

offsetWidth clientWidth scrollWidth
offsetHeight clientHeight scrollHeight
offsetLeft clientLeft scrollLeft
offsetTop clientTop scrollTop

In order to understand these client and scroll properties, you need to know that the content of an HTML element may be larger than the content box allocated to hold that content, and that therefore individual elements may have scrollbars (see the CSS over flow attribute in §16.2.6 ). The content area is a viewport, like the browser window is, and when the content is larger than the viewport, we need to take an element’s scrollbar position into account.

clientWidth and clientHeight are like offsetWidth and offsetHeight except that they do not include the border size, only the content area and its padding. Also, if the browser has added scrollbars between the padding and the border, clientWidth and clientHeight do not include the scrollbar in their returned value. Note that client Widthand clientHeightalways return 0 for inline elements like ,, and .

clientWidth and clientHeight were used in the getViewportSize() method of Exam ple 15-9 . As a special case, when these properties are queried on the root element of a document (or the body element in quirks mode), they return the same values as the innerWidth and innerHeight properties of the window.

The clientLeftand clientTopproperties are not very useful: they return the horizontal and vertical distance between the outside of an element’s padding and the outside of its border. Usually these values are just the width of the left and top borders. If an element has scrollbars, however, and if the browser places those scrollbars on the left or top (which would be unusual), clientLeft and clientTop also include the scrollbar width. For inline elements, clientLeft and clientTop are always 0.

scrollWidthand scrollHeight are the size of an element’s content area plus its padding plus any overflowing content. When the content fits within the content area without overflow, these properties are the same as clientWidth and clientHeight. But when

15.8 Document and Element Geometry and Scrolling | 395

there is overflow, they include the overflowing content and return values larger than clientWidth and clientHeight.

Finally, scrollLeftand scrollTopgive the scrollbar positions of an element. We queried them on the root element of the document in the getScrollOffsets() method ( Exam ple 15-8 ), but they are also defined on any element. Note that scrollLeft and scroll Topare writable properties and you can set them to scroll the content within an element. (HTML elements do not have a scrollTo() method like the Window object does.)

When a document contains scrollable elements with overflowing content, the getEle mentPosition()method defined above does not work correctly because it does not take scrollbar position into account. Here is a modified version that subtracts scrollbar positions from the accumulated offsets and, in so doing, converts the returned position from document coordinates to viewport coordinates:

function getElementPos(elt) {

var x = 0, y = 0;

// Loop to add up offsets

for(var e = elt; e != null; e = e.offsetParent) {

x += e.offsetLeft;

y += e.offsetTop;


// Loop again, through all ancestor elements to subtract scroll offsets.

// This subtracts the main scrollbars, too, and converts to viewport coords.

for(var e=elt.parentNode; e != null && e.nodeType == 1; e=e.parentNode) {

x -= e.scrollLeft;

y -= e.scrollTop;


return {x:x, y:y};


友情链接It题库(| 版权归yishouce.com所有| 友链等可联系|粤ICP备16001685号-1