Home > Developer > JavaScript
Copy codeThe Code is as follows:
// Obtain the x coordinate of the element
Function pageX (elem ){
Return elem. offsetParent? (Elem. offsetLeft + pageX (elem. offsetParent): elem. offsetLeft;
}
// Obtain the y coordinate of the element
Function pageY (elem ){
Return elem. offsetParent? (Elem. offsetTop + pageY (elem. offsetParent): elem. offsetTop;
}
It seems that this great god was quite eager to get out of this book, and there were a lot of flaws. At last, the great god found that there were problems with these two functions and they were not applied to JQuery. Because an element is computed in the accumulative way, as long as there is a problem, it may be large layers. Therefore, I will discard this method when accurately obtaining style attributes. Refer to the conclusion of the great god for miscalculation:
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
Miscalculation of absolutely positioned elements.
As cutting-edge browsers support the IE getBoundingClientRect method, we can use simpler, faster, and safer methods to locate page elements. GetBoundingClientRect returns a set of coordinates of the four corners of the element in the browser's visible area.
However, it has a strange problem in the standard IE mode. The html element has a border. The default value is 2px and cannot be modified. The strange mode does not exist. See http://msdn.microsoft.com/en-us/library/ms536433 (VS.85). aspx
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.
We will perform some tests (in IE6 and IE8 respectively ):
1. Standard mode, no html border resetting
<! Doctype html> <ptml dir = "ltr" lang = "zh-CN"> <pead> <meta charset = "gb2312"/> <meta http-equiv = "X-UA -Compatible "content =" IE = 8 "> <style type =" text/css "> html, body {/* border: 0; */} </style> <title> getBoundingClientRect </title> </pead> <body> <p> <button type = "button" onclick = "text () "> run the Code </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
2. Standard mode: resetting html border
<! Doctype html> <ptml dir = "ltr" lang = "zh-CN"> <pead> <meta charset = "gb2312"/> <meta http-equiv = "X-UA -Compatible "content =" IE = 8 "> <style type =" text/css "> html, body {border: 0 ;} </style> <title> getBoundingClientRect </title> </pead> <body> <p> <button type = "button" onclick = "text () "> run the Code </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
3. No html border resetting in the geek Mode
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <style type =" text/css "> html, body {/* border: 0; */} </style> <title> getBoundingClientRect </title> </pead> <body> <p> <button type = "button" onclick = "text () "> run the Code </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
4. Weird mode, resetting html border
<Html> <pead> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "> <style type =" text/css "> html, body {border: 0 ;} </style> <title> getBoundingClientRect </title> </pead> <body> <p> <button type = "button" onclick = "text () "> run the Code </button> </p> </body> </ptml>
[Ctrl + A select all Note: If you need to introduce external Js, You need to refresh it to execute]
The solution provided by John Resig is to use clientTop and clientLeft for impairment. The following functions are extracted from JQuery and then used to obtain the coordinates of the page elements, which is much safer than the offset method.
Copy codeThe Code is as follows:
Var getCoords = function (el ){
Var box = el. getBoundingClientRect (),
Doc = el. ownerDocument,
Body = doc. body,
Html = doc.doc umentElement,
ClientTop = html. clientTop | body. clientTop | 0,
ClientLeft = html. clientLeft | body. clientLeft | 0,
Top = box. top + (self. pageYOffset | html. scrollTop | body. scrollTop)-clientTop,
Left = box. left + (self. pageXOffset | html. scrollLeft | body. scrollLeft)-clientLeft
Return {'top': top, 'left': left };
};
Self. pageYOffset is equivalent to window. self. pageYOffset. It is an attribute of Firefox and is equivalent to document. body. scrollTop. The following is its definition:
Definition: The pageYOffset property is used to determine the Y coordinate of the scroll position in some browsers. this is not a reserved word so you can declare your own variable or function called pageYOffset but if you do then you will not be able to find or alter the scroll position of a window in some browsers
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
