getBoundingClientRect 函数

最新推荐文章于 2023-12-08 17:52:45 发布

转载最新推荐文章于 2023-12-08 17:52:45 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/blackwood/archive/2012/08/22/2650995.html

文章标签：

#javascript #ViewUI

本文介绍了一个用于获取页面元素位置的函数，并通过实例演示了如何使用此函数获取元素的top、bottom、left和right属性值，进而计算出元素在页面上的具体位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前没有听说过这个函数，于是查了相关资料，该函数获取元素在当前页面的位置，返回结果为一个ClientRect对象。

这个对象有top、bottom、left、right几个属性。

top：元素顶部距离页面顶部的大小。

bottom：元素底部距离页面顶部的大小。

left：元素左部距离页面左部的大小。

right：元素右部距离页面左部的大小。

举例

代码

<p id="box" style="margin:10px 0 0 50px; width:100px; height:30px; background:#ccc;"> </p>
<script type="text/javascript">
　　var ob=document.getElementById("box").getBoundingClientRect();  
　　alert("上:"+ob.top+"下:"+ob.bottom+"左:"+ob.left+"右:"+ob.right);
</script>

运行结果

代码

<p id="box" style="margin:10px 0 0 50px; width:100px; height:30px; background:#ccc;"> </p>
<P id="two" style="width:500px;height:200px;text-align:center">请点击这里</p>
<script type="text/javascript"> 
　　document.getElementById("two").onclick=function(){
     ob=document.getElementById("box").getBoundingClientRect();
     alert("上:"+ob.top+"下:"+ob.bottom+"左:"+ob.left+"右:"+ob.right);
   };
</script>

运行结果

备注

getBoundingClientRect().left+document.documentElement.scrollLeft 得到元素位于页面的X坐标
getBoundingClientRect().top+document.documentElement.scrollTop 得到元素位于页面的Y坐标

转载于:https://www.cnblogs.com/blackwood/archive/2012/08/22/2650995.html