DOM元素中的 left

在 html 中有各种各样的获取left的属性或者方法
比如 clientLeft,offsetLeft,亦或者是getBoundingClientRect().left
经常弄混这些属性，今天做个梳理

 <div id="container">
     <div id="box"></div>
 </div>

    #container{
     background-color: orange;
     height: 100px;
     width: 2500px; 
     padding: 20px;
    }
    
    #box {
      background-color: red;
      width: 100px;
      height: 100px;
      padding: 10px;
      border: 15px solid green;
      margin-left:25px;
    }

效果图

const box = document.getElementById("box")

clientWidth

翻译过来的意思是客户端宽度

只包含wdith+padding的宽度

// width + padding
console.log(box.clientWidth) // width:100,padding:20

offsetWidth

偏移宽度，既然是偏移，肯定要加上 border

// width + padding + border
console.log(box.clientWidth) // width:100,padding:20,border:30

clientLeft

客户端的左边值，那么就一定是border宽度了

// border的宽度
console.log(box.clientLeft) // border:15

clientLeft * 2 + clientWidth == offsetWidth

offsetLeft

元素左边的距离

// 元素距离有最近有定位的左边框的距离
console.log("offsetLeft",box.offsetLeft)

改变一下 css

#container  {
    ...
 + position: relative;
 + padding: 120px; 
}
#box {
+ margin-left:30px;
}

box 加上 30 的左边距，box 的父元素加上相对定位和 120 的 padding 此时根据上面的结论

clientWidth: 客户端宽度，还是 120
offsetWidth: 客户端宽度 + border 150
clientLeft: border 宽度 15

但是，offsetLeft是根据 最近的有定位的元素

// 父元素的 padding + 自身的margin
console.log("offsetLeft",box.offsetLeft) // 120 + 30

如果父元素的父元素身上加上定位

    #container  {
    ...
   margin-left: 100px;
   padding: 120px;
 - position: relative;
}
body {
  position: relative;
  padding: 50px;
}
#box{
   margin-left:30px
}

由于 body上加上 定位,box的offsetLeft需要根据body计算

body 的 padding + 父元素的marginLeft + 父元素的 paddingLeft + 自身的 marginLeft 这样才能算是自己的offsetLeft

也就是 ： 50 + 100 + 120 + 30  = 300

点击事件中的 clientX

box.addEventListener("click",function(e){
    console.log(e.clientX,"clientX")
}

clientX 同理，是可视距离的 x 值，如果发生了滚动，可能有变化

点击事件中的 offsetX

和 offsetLeft 的性质一样，点击位置距离border的大小，如果点击border,是负数

box.addEventListener("click",function(e){
    console.log(e.offsetX,"offsetX")
}

点击事件中的 pageX

鼠标相对于文档的X坐标，会计算滚动距离；如果没有滚动距离，值与clientX一样

box.addEventListener("click",function(e){
    console.log(e.pageX,"pageX")
}

如果body 有滚动，那么就要加上滚动距离一定是 body 发生了滚动，其他元素滚动不计算，是根据body 的滚动距离

点击事件中的 screenX

字面意思理解，点击位置距离显示屏的x距离

box.addEventListener("click",function(e){
    console.log(e.screenX,"screenX")
}

getBoundingClientRect().left

返回节点的布局可见位置节点的可见位置

 console.log(box.getBoundingClientRect().left)

总结

学到了很多关于范围边界的测算 1、clientWidth：目标元素的width+padding(左右两侧)

2、offsetWidth：目标元素的width+padding(左右两侧)+border(左右两侧)

3、clientLeft：目标元素左边框border的宽度

4、offsetLeft：目标元素左边框离其具有定位的父元素之间的距离

5、clientX：鼠标相对于浏览器窗口可视区域的X坐标（横向）

6、offsetX：鼠标相对于绑定事件元素的X坐标

7、pageX：鼠标相对于文档的X坐标，会计算滚动距离；如果没有滚动距离，值与clientX一样

8、screenX：鼠标相对于显示器屏幕左侧的X坐标

9、getBoundingClientRect().left：目标元素左边框相对于浏览器可视区域的距离，可能为负值

time:2022/10/5 23:55
参考: B站

DOM 元素中的 left