首页 > 编程笔记 > JavaScript笔记 阅读:153

JS获取元素的偏移位置

元素的偏移位置指的是相对于最近定位的父节点或 body 元素的偏移位置。使用元素的 offsetParent 属性可以获取元素的最近定位的父节点,而使用 offsetLeft 和 offsetTop 属性可以分别获取元素相对定位父元素或 body 元素的水平和垂直偏移位置。

【例 1】获取元素的偏移父节点。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获取偏移父节点</title>
<style>
#div2{
     position:relative;
}
#div3{
     position:relative;
}
</style>
</head>
<body>
  <div id="div1">
     <div id="div2">
       <div id="div3">
           <div id="div4"></div>
       </div>
     </div>
   </div>
   <script>
      var div2 = document.getElementById('div2');
      var div4 = document.getElementById('div4');
      console.log("第二个div的偏移父节点为:");
      console.log(div2.offsetParent);
      console.log("第四个div的偏移父节点为:");
      console.log(div4.offsetParent);
   </script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 1 所示。
获取元素的偏移父节点
图 1:获取元素的偏移父节点

【例 2】获取元素的水平和垂直偏移位置。
<!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;}
   #div4{width:30px;height:30px;border:3px solid olive;position:absolute;left:20px;
             top:10px;}
</style>
</head>
<body>
  <div id="div1">
    <div id="div2">
      <div id="div3">
          <div id="div4"><div>
      </div>
    </div>
  </div>
  <script>
     var div2 = document.getElementById('div2');
     var div4 = document.getElementById('div4');
     console.log("第二个div的水平偏移位置为:");
     console.log(div2.offsetLeft);
     console.log("第四个div的水平偏移位置为:");
     console.log(div4.offsetLeft);
     console.log("第二个div的垂直偏移位置为:");
     console.log(div2.offsetTop);
     console.log("第四个div的垂直偏移位置为:");
     console.log(div4.offsetTop);
  </script>
</body>
</html>
上述代码在 Chrome 浏览器中的运行结果如图 2 所示。
获取元素的水平和垂直偏移位置
图 2:获取元素的水平和垂直偏移位置

由例 2 的 CSS 代码可知,第二个 div 没有定位父节点,所以其偏移相对于 body 节点,其水平和垂直偏移位置分别等于第一个 div 的边框宽度(3px)加上 body 的默认外边距(8px),因而结果为 11px。

第四个 div 有两个定位祖先节点,其中第三个 div 离它最近,因而它的偏移父节点为第三个 div,它的样式代码中的 left 属性值(20px)正是相对于偏移父节点的水平距离,top 属性值(10px)正是相对于偏移父节点的垂直距离,因而它的水平和垂直偏移位置分别为 20 和 10。

第四个 div 使用了内嵌样式代码来设置水平和垂直偏移,因而它的偏移位置也可以使用 getComputedStyle() 来获取,即 div4.offsetLeft 也可以使用 getComputedStyle(div4).left 来代替;div.offsetTop 使用 getComputedStyle(div4).top 来代替。需要注意的是,getComputedStyle() 方法获取的结果默认为 px 为单位,并会在结果中包含 px。

编程帮,一个分享编程知识的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,一篇文章只讲一个知识点。

文章不深奥,不需要钻研,在公交、在地铁、在厕所都可以阅读,随时随地涨姿势。

文章不涉及代码,不烧脑细胞,人人都可以学习。

当你决定关注「编程帮」,你已然超越了90%的程序员!

编程帮二维码
微信扫描二维码关注

所有教程

优秀文章