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

15.8.2 Querying the Geometry of an Element

The two examples above have used the scrollLeft, scrollTop, clientWidth, and clientHeight properties. We’ll encounter these properties again in §15.8.5 .

15.8.2 Querying the Geometry of an Element

The easiest way to determine the size and position of an element is to call its getBoundingClientRect() method. This method was introduced in IE5 and is now implemented by all current browsers. It expects no arguments and returns an object with properties left, right, top, and bottom. The left and top properties give the X and Y coordinates of the upper-left corner of the element and the right and bottomproperties give the coordinates of the lower-right corner.

This method returns element positions in viewport coordinates. (The word “client” in the method name getBoundingClientRect() is an oblique reference to the web browser client—specifically to the window and the viewport it defines.) To convert to document coordinates that remain valid even if the user scrolls the browser window, add the scroll offsets:

var box = e.getBoundingClientRect(); // Get position in viewport coordinates var offsets = getScrollOffsets(); // Utility function defined above var x = box.left + offsets.x; // Convert to document coordinates var y = + offsets.y;

In many browsers (and in the W3C standard), the object returned by getBounding ClientRect() also has width and height properties, but the original IE implementation does not do this. For portability, you can compute the element width and height like this:

var box = e.getBoundingClientRect();

var w = box.width || (box.right - box.left);

var h = box.height || (box.bottom -;

You’ll learn in Chapter 16 that the content of an element is surrounded by an optional blank area known as padding. The padding is surrounded by an optional border, and the border is surrounded by optional margins. The coordinates returned by getBoundingClientRect()include the border and the padding of the element but do not include the element margins.

If the word “Client” in the method getBoundingClientRect() specifies the coordinate system of the returned rectangle, what explains the word “Bounding” in the method name? Block elements, such as images, paragraphs, and

elements are always rectangular when laid out by the browser. Inline elements, such as ,, and

elements, however, may span multiple lines and may therefore consist of multiple rectangles. Imagine, for example, some italicized text (marked up with and tags) that is broken across two lines. Its rectangles consist of the right-hand portion of the first line and the left-hand portion of the second line (assuming left-to-right text). If you call getBoundingClientRect() on an inline element, it returns the “bounding rectangle” of the individual rectangles. For the element described above, the bounding rectangle would include the entire width of both lines.

If you want to query the individual rectangles of inline elements, call the getClientRects() method to obtain a read-only array-like object whose elements are rectangle objects like those returned by getBoundingClientRect().

We’ve seen that DOM methods like getElementsByTagName() return “live” results that are updated as the document changes. The rectangle objects (and rectangle object lists) returned by getBoundingClientRect()and getClientRects()are not live. They are static snapshots of the visual state of document when the methods are called. They are not updated when the user scrolls or resizes the browser window.

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