JS中的位置和宽度：clientWidthoffsetWidthscrollWidth，clientTop和clientLeft等区别

Posted 2021-03-02 wenqianqian

　下面说的这三种宽，都是基于元素被加入到DOW渲染树后，也就是被添加到页面中以后，才可以获取。并且图片这类后加载元素无法获取宽。

　clientWidth  客户宽   offsetWidth  偏移宽　 scrollWidth  滚动宽

　　直接获取样式的宽度得到的是样式值，带有px单位。

　　通过 div.clientWidth 获取到的是样式的数值，是没有单位的。他们一个是字符串，一个是数值。

　　div.clientWidth 的值是 width+padding ，有滚动条的时候：width+padding-17（17是滚动条宽度）。

　　div.offsetWidth 的值是 width+padding+border ，有滚动条的时候：是实际这个div的占位宽度

　　div.scrollWidth 的值是 width+padding ，有滚动条的时候：因为内容宽度不同，实际内容宽度+padding

　　在运用的时候，我们想要获取元素的宽度，如果不需要滚动条宽度，就可以用 clientWidth 。如果想要获取元素实际宽度就用 offsetWidth 。如果想要获取元素内部的宽，就用 scrollWidth 。

<style>
   div{width: 100px;height: 100px;border: 10px solid #000;padding: 10px;margin: 10px;overflow: scroll;}
</style>   

　<div>

　　　　ssssssssssssssssssssssssssssssssss</br>sssssssssssssssssssssssssssssss水水水水水水水水水水水水水水水水水水水s

　</div>

　var div=document.querySelector("div");

　console.log(getComputedStyle(div).width);//样式值 100px 

　console.log(div.clientWidth);//样式的数值 120 width+padding 有滚动条 width+padding-17（滚动条宽度） 103

　console.log(div.offsetWidth);//140 width+padding+border 有滚动条时 实际这个div的占位宽度 140

　console.log(div.scrollWidth);//120 width+padding 有滚动条 因为内容宽度不同，实际内容宽度+padding 272

　

元素以外的宽高，页面宽高　

　document.body.clientWidth   获取的是页面的可视宽度-16（默认左右各8个像素的margin值）

　document.documentElement.clientWidth 获取的是页面的可视宽度，可视宽度并不会因为页面的内容大而撑开

body的offsetWidth和clientWidth相同 。offsetWidth 获取的是html页面的可视宽度，有内容时，宽度仍然是可视宽度

没有内容时scrollWidth和body的clientWidth相同。有内容时，就是内容宽度
如果没有body没有高度，则是可视宽高。
如果body有宽度，不超过可视宽度，则是可视宽度。
如果body的宽度超出可视范围，则是body宽度+margin(宽度+margin)。
见图1、图2

console.log(document.body.clientWidth);
console.log(document.documentElement.clientWidth);
console.log(document.body.offsetWidth);
console.log(document.documentElement.offsetWidth);
console.log(document.body.scrollWidth);
console.log(document.documentElement.scrollWidth);

图1

 

图2

 

 

 

　clientTop  clientLeft

　clientTop  clientLeft 就是边线宽高。跟定位没有任何关系，如果没有设置边宽，那就是0。见图3

<style>
      #div0 {width:200px;height:200px;padding:50px;margin:50px;border:2px solid #000;}
      #div1 {width:100px;height:100px;background-color:red;border:1px solid #000;overflow: auto;}
</style>
    <div id="div0">
          <div id="div1"></div>
    </div>
    <script>
      var div1 = document.getElementById("div1");
      //   边线宽高
        console.log(div1.clientLeft,div1.clientTop);
    </script>

 

图3