您当前的位置:首页 > 计算机 > 编程开发 > JavaScript

JS获取元素的绝对位置

时间:03-07来源:作者:点击数:

在 JavaScript 中,使用元素的 getBoundingClientRect() 方法可以获取元素相对于浏览器视窗的位置。该方法返回一个 Object 对象,该对象有 6 个属性:top、left、right、bottom、width、height:

  • top 表示元素上外边框到浏览器视窗上边框的距离;
  • left 表示元素左外边框到浏览器视窗左边框的距离;
  • right 表示元素右外边框到浏览器视窗左边框的距离;
  • bottom 表示元素下外边框到浏览器视窗上边框的距离;
  • width 表示元素的宽度,其中包括左、右边框宽度;
  • height 表示元素的高度,其中包括上、下边框宽度。

【例 1】获取元素的绝对位置。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取元素的绝对位置</title>
<style>
   #div1{width:100px;height:100px;border:3px solid red;}
   #div2{width:70px;height:70px;border:3px solid blue;position:relative;}
   #div3{width:50px;height:50px;border:3px solid green;position:absolute;
        left:20px;top:10px;}
</style>
</head>
<body>
  <div id="div1">
    <div id="div2">
      <div id="div3"></div>
    </div>
  </div>
  <script>
     var div3 = document.getElementById('div3');
     alert("div3的left属性值为:"+div3.getBoundingClientRect().left+"px,right属性值为:"+
               div3.getBoundingClientRect().right+"px,top属性值为:"+
               div3.getBoundingClientRect().top+"px,bottom属性值为:"+
               div3.getBoundingClientRect().bottom+"px,width属性值为:"+
               div3.getBoundingClientRect().width+"px,height属性值为:"+
               div3.getBoundingClientRect().height+"px");
  </script>
</body>
</html>

上述代码在 Chrome 浏览器中的运行结果如图 1 所示。

获取元素的绝对位置
图 9:获取元素的绝对位置

由上图可知:

  • div3 的 left 属性值等于 div3 的 left(20)+div2 的边框宽度(3)+div1 的边框宽度(3)+body 默认的外边距(8);
  • right 属性值等于 div3 的 left(20)+div2 的边框宽度(3)+div1 的边框宽度(3)+body 默认的外边距(8)+div3 的内容宽度(50)+div3 的左、右边框宽度(3+3);
  • top 和 bottom 的属性值可参照 left 和 right 属性值的获取方式得到;
  • width 属性值等于 div3 的内容宽度(50)+左、右边框宽度(3+3);
  • height 属性值等于 div3 的内容宽度(50)+上、下边框宽度(3+3)。

需要注意的是,使用 getBoundingClientRect() 方法得到的 top、left、right、bottom 值会随可视窗口的变化而变化。

方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门