This method is no longer IEOnly. FF3.0 + and Opera9.5 + support this method. It can be said that the efficiency of obtaining the page element location can be greatly improved, in earlier versions of Opera and Firefox, the absolute position of elements on the page must be obtained through loops. Document.doc umentElement. getBoundingClientRect
Here is the description of MSDN:
Syntax
ORect = object. getBoundingClientRect () Return Value
Returns a TextRectangle object. Each rectangle has four integer properties (top, left, right, and bottom) that represent a coordinate of the rectangle, in pixels.
Remarks
This method retrieves an object that exposes the left, top, right, and bottom coordinates of the union of rectangles relative to the client's upper-left corner. in Microsoft Internet Explorer 5, the window's upper-left is at 2, 2 (pixels) with respect to the true client.
In practice, this method obtains the positions of an element on the left, top, right, and bottom of the page relative to the browser window. It is hard to understand. The following figure shows how to use it.
This method is no longer IE Only. FF3.0 + and Opera9.5 + support this method. It can be said that the efficiency of obtaining the page element location can be greatly improved, in earlier versions of Opera and Firefox, the absolute position of elements on the page must be obtained through loops.
The following code provides a simple example. you can scroll the scroll bar and then click the red area to view the changes of each value.
