小虎博客

A-A+

javascript获取页面元素具体位置方法

2016年01月13日 编程技术 暂无评论

记得以前getBoundingClientRect只能在ie下使用，现在可以在FF3+，opera9.5+，safari 4,最初我们只用x += el.offsetLeft;_y += el.offsetTop;}while(el=el.offsetParent);return {x:_x,y:_y};这类代码来解决。

getBoundingClientRect()；该方法获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，他返回的是一个对象，即Object，该对象有是个属性：top，left，right，bottom；这里的top、left和css中的理解很相似，但是right，bottom和css中的理解有点不一样.

可以滚动滚动条之后点红色区域看各个值的变化.

完整实例代码如下:

  1. <body style="width:2000px; height:1000px;">  
  2.     <div id="demo" style="position:absolute; left:518px; right:100px; width:500px; height:500px; background:#CC0000; top: 114px;">Demo为了方便就直接用绝对定位的元素</div>  
  3. </body>  
  4. </html>  
  5. <script>  
  6. document.getElementById('demo').onclick=function (){  
  7.         if (document.documentElement.getBoundingClientRect) {   
  8.             alert("left:"+this.getBoundingClientRect().left)  
  9.             alert("top:"+this.getBoundingClientRect().top)  
  10.             alert("right:"+this.getBoundingClientRect().right)  
  11.             alert("bottom:"+this.getBoundingClientRect().bottom)  
  12.             var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;  
  13.             var Y = this.getBoundingClientRect().top+document.documentElement.scrollTop;  
  14.             alert("Demo的位置是X:"+X+";Y:"+Y)  
  15.         }   
  16. }  
  17. </script>  

注:getBoundingClientRect()是IE特有的,目前FF3+,opera9.5+,safari 4,都已经支持这个方法.

标签：

给我留言