Document. The documentElement. GetBoundingClientRect

this is the interpretation of the MSDN:
<! PUBLIC DOCTYPE HTML "-////W3C DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<HTML XMLNS="http://www.w3.org/1999/xhtml" >
<Head>
<Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/>
<Title> DEMO
</head>

<Body style="width: 2000px; height: 1000px;" >
<Div id="demo" style="position: absolute; left: 518px; right: 100px; width: 500px; height: 500px; background: #CC0000; top: 114px;" >The Demo for the convenience of using absolute positioning elements directly </div>
</body>
</html>
<Script> .
the document getElementById (' demo '). The onclick=function () {
if (document. DocumentElement. GetBoundingClientRect) {
alert (" left: "+ enclosing getBoundingClientRect () left)
alert (" top:" + enclosing getBoundingClientRect (). The top)
alert (" is right: "+ this. GetBoundingClientRect () right)
alert (" bottom:" + enclosing getBoundingClientRect (). The bottom)
var X=this. GetBoundingClientRect () left + document. The documentElement. ScrollLeft;
var Y=this. GetBoundingClientRect (). The top + document. The documentElement. ScrollTop;
alert (" the position of the Demo is X: "+"; Y: "+ X + Y)

}}
</script>

with this method, get the location of the page element is simpler,

var X=this. GetBoundingClientRect () left + document. The documentElement. ScrollLeft;
var Y=this. GetBoundingClientRect (). The top + document. The documentElement. ScrollTop;


This concludes the body part