getBoundingClientRect() 来获取页面元素的位置

时间 2019-11-21

标签 getboundingclientrect 获取页面元素位置繁體版

原文原文链接

仍是实际解释下，该方法得到页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。也很差理解，下面用图说明下。 html

该方法已经再也不是IE Only了，FF3.0+和Opera9.5+已经支持了该方法，能够说在得到页面元素位置上效率能有很大的提升，在之前版本的Opera和Firefox中必须经过循环来得到元素在页面中的绝对位置。浏览器

下面的代码举了个简单的例子，能够滚动滚动条以后点红色区域看各个值的变化。 ui

Code <!DOCTYPE html PUBLIC "-//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</title> </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;">Demo为了方便就直接用绝对定位的元素</div> </body> </html> <script> document.getElementById('demo').onclick=function (){ if (document.documentElement.getBoundingClientRect) { alert("left:"+this.getBoundingClientRect().left) alert("top:"+this.getBoundingClientRect().top) alert("right:"+this.getBoundingClientRect().right) alert("bottom:"+this.getBoundingClientRect().bottom) var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop; alert("Demo的位置是X:"+X+";Y:"+Y) } } </script>

有了这个方法，获取页面元素的位置就简单多了， this

 var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft; var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;