Copy Code code as follows:
Get element x coordinates
function Pagex (elem) {
Return elem.offsetparent? (Elem.offsetleft+pagex (elem.offsetparent)): Elem.offsetleft;
}
Get element y coordinate
function Pagey (elem) {
Return elem.offsetparent? (Elem.offsettop+pagey (elem.offsetparent)): Elem.offsettop;
}
It seems that the great God in the book when the more hurried, there are many flaws, the last great God also found that these two functions are problematic, and did not apply them to jquery. Because it is calculated in an additive way, as long as one element is problematic, it is possible that the layers are large, so I discard this approach when I get the style attributes exactly. The main mistake is to refer to the conclusion of the Great God:
Handling table border offsets.
Fixed positioned elements.
Scroll offsets within another element.
Borders of overflowed parent elements.
Miscalculation of absolutely positioned elements.
As new browsers support IE's getboundingclientrect approach, we are able to locate page elements in simpler, faster, and more secure ways. Getboundingclientrect returns a collection of coordinates for the four corners of the element in the browser's viewable area.
But there is a strange problem with the standard mode of IE, the HTML element is border, the default is 2px, and it is not modifiable; the quirks pattern is not. Refer to http://msdn.microsoft.com/en-us/library/ms536433 (vs.85). aspx
This
is 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 are at 2,2 (pixels) With respect to true client.
Let's do some testing (please do it separately in IE6 and IE8):
1, Standard mode, no reset HTML border
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "gb2312"/> <meta http-eq uiv= "x-ua-compatible" content= "ie=8" > <style type= "text/css" > HTML, body{/* border:0;/} </style> <script type= "Text/javascript" > var Isquirk = (document.documentmode)? (document.documentmode==5)? True:false: ((document.compatmode== "Css1compat")? false:true); var getcoords = function (EL) {var box = El.getboundingclientrect (), top = box.top, left = Box.left return {top:top, Left:left}; }; var text = function () {var r = getcoords (document.documentelement) alert (r.top+ "," +r.left); Alert (Document.documentElement.clientLeft) if (Isquirk) {alert ("quirk mode"); }else{alert ("Standard mode"); }} </script> <title>getBoundingClientRect</title> </pead> <body> <p><button Type= "button" onclick= "text ()" > Run code </button></p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
2, the standard mode, reset the HTML border
<!doctype html> <ptml dir= "ltr" lang= "ZH-CN" > <pead> <meta charset= "gb2312"/> <meta http-eq uiv= "x-ua-compatible" content= "ie=8" > <style type= "text/css" > HTML, body{border:0; } </style> <script type= "Text/javascript" > var Isquirk = (document.documentmode)? (document.documentmode==5)? True:false: ((document.compatmode== "Css1compat")? false:true); var getcoords = function (EL) {var box = El.getboundingclientrect (), top = box.top, left = Box.left return {top:top, Left:left}; }; var text = function () {var r = getcoords (document.documentelement) alert (r.top+ "," +r.left); Alert (Document.documentElement.clientLeft) if (Isquirk) {alert ("quirk mode"); }else{alert ("Standard mode"); }} </script> <title>getBoundingClientRect</title> </pead> <body> <p><button Type= "button" onclick= "text ()" > Run code </button></p> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
3, quirks mode, no reset HTML border
<textarea id="runcode9503"><ptml> <pead> <meta http-equiv= "Content-type" content= "text/html charset=utf-8" > <style typ E= "Text/css" > HTML, body{/* border:0;/} </style> <script type= "Text/javascript" > var Isquirk = ( Document.documentmode)? (document.documentmode==5)? True:false: ((document.compatmode== "Css1compat")? false:true); var getcoords = function (EL) {var box = El.getboundingclientrect (), top = box.top, left = Box.left return {top:top, Left:left}; }; var text = function () {var r = getcoords (document.documentelement) alert (r.top+ "," +r.left); Alert (Document.documentElement.clientLeft) if (Isquirk) {alert ("quirk mode"); }else{alert ("Standard mode"); }} </script> <title>getBoundingClientRect</title> </pead> <body> <p><button Type= "button" onclick= "text ()" > Run code </button></p> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
4, the quirks mode, reset HTML border
<textarea id="runcode49024"><ptml> <pead> <meta http-equiv= "Content-type" content= "text/html charset=utf-8" > <style typ E= "Text/css" > HTML, body{border:0; } </style> <script type= "Text/javascript" > var Isquirk = document.documentmode? Document.documentmode = = 5:document.compatmode && document.compatmode!= "Css1compat"; var getcoords = function (EL) {var box = El.getboundingclientrect (), top = box.top, left = Box.left return {top:top, Left:left}; }; var text = function () {var r = getcoords (document.documentelement) alert (r.top+ "," +r.left); Alert (Document.documentElement.clientLeft) if (Isquirk) {alert ("quirk mode"); }else{alert ("Standard mode"); }} </script> <title>getBoundingClientRect</title> </pead> <body> <p><button Type= "button" onclick= "text ()" > Run code </button></p> </body> </ptml></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The solution given by John Resig is to use Clienttop,clientleft as a subtraction. The following functions are extracted from jquery and then used to get the coordinates of the page elements more secure than the offset Dafa.
Copy Code code as follows:
var getcoords = function (EL) {
var box = El.getboundingclientrect (),
Doc = El.ownerdocument,
BODY = Doc.body,
html = doc.documentelement,
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};
};
Which self.pageyoffset equivalent to Window.self.pageYOffset, is a Firefox attribute, the equivalent of Document.body.scrollTop. Here's how it's defined:
Definition:the pageYOffset is used to determine the Y coordinate of the scroll position in some. This isn't a reserved word so can declare your own variable or function called pageYOffset but if I do then you wil L not is able to find or alter the scroll position of a windows in some browsers
