首页 > 代码库 > 页面元素大小相关（offsetWidth、clientWidth、scrollWidth等）详解笔记

页面元素大小相关（offsetWidth、clientWidth、scrollWidth等）详解笔记

2024-07-26 00:30:56   226人阅读

  在学习过程中也好，实际开发中也好，总会碰到各种offsetWidth/offsetHeight/offsetLeft/offsetTop和clientWidth/clientHeight还有scrollWidth/scrollHeight/scrollLeft/scrollTop这些属性，不搞清楚还 真有些蒙圈。于是乎，我来自习探索一番。

 

  一、偏移量：（offsetWidth/offsetHeight/offsetLeft/offsetTop）

       元素的可见大小由其高度和宽度决定，这包括所有的内边距（padding）、滚动条和边框（border）大小（注意这里面不包括margin喔，因为margin是透明的，一般使用它控制元素之间的间隔）。这是为什么呢，因为吧，可以一试，如果我们给元素添加背景的话，那么背景会被应用 于由内容和内边距组成的区域，而添加边框（border）会在内边距（padding）的区域外边加一条线，margin透明，当然不在可见范围内啦。

 

      具体四个属性包括哪些值，书上是这样说的：

      

 

     但是实际情况 稍有不同（还需高人指点），下面是我测试的结果：

     

 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset=utf-8> 5 <title>元素大小相关（offsetTop/clientHeight/scrollTop~）</title> 6 </head>  7  8 <style>   9   body{10     margin:0;11     padding: 0;12   }13   #fullDiv {14     background-color: red;15     width: 100px;16     height: 100px;17     margin-top: 200px;18     padding-top: 100px;19     margin-left: 300px;20     padding-left: 100px;21     border-top: 50px;22     border-left: 150px;23   }24 </style>  25     26 <body>27    <div>28    <div id="fullDiv"></div>29    </div>30     31     <script>32        var div = document.getElementById(‘fullDiv‘);33        console.log(‘div的offsetHeight为：‘+div.offsetHeight);//chrome/FF/IE10:200px,height+padding;34        console.log(‘div的offsetWidth为：‘+div.offsetWidth);//chrome/FF/IE10:200px,width+padding35        console.log(‘div的offsetLeft为：‘+div.offsetLeft);//chrome/FF/IE10:300px,margin(注，若body不加如上样式，则会308px)36        console.log(‘div的offsetTop为：‘+div.offsetTop);//chrome/FF/IE10:200px,margin37     </script>38 </body>  39 </html>

运行结果（chrome、FF、IE10）:

 

Tips：

1.如果要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，如此循环至根元素，就可以得到一个基本准确的值。

2.如果有些div他的offsetParent是<body>的话，那么也可以尝试getElementLeft（）和getElementTop（）方法，不出意外地话会返回跟offsetLeft和offsetTop相同的值。

3.所有这些偏移量都是只读的，而且每次访问的时候都需要重新计算，要注意性能问题。

 

 

二、客户区的大小（clientWidth/clientHeight）

      元素的客户区的大小就是指元素内容及其内边距所占空间的大小（滚动条占用的空间不计算在内）。（clientWidth=width+padding（left、right）；clientHeight=height+padding（top、bottom））

     

 1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset=utf-8> 5 <title>元素大小相关（offsetTop/clientHeight/scrollTop~）</title> 6 </head>  7  8 <style>   9   body{10     margin:0;11     padding: 0;12   }13   #fullDiv {14     background-color: red;15     width: 100px;16     height: 100px;17     margin-top: 200px;18     padding-top: 100px;19     margin-left: 300px;20     padding-left: 100px;21     border-top: 50px;22     border-left: 150px;23   }24 </style>  25     26 <body>27    <div>28    <div id="fullDiv"></div>29    </div>30     31     <script>32        var div = document.getElementById(‘fullDiv‘);33        console.log(‘div的clientHeight为：‘+div.clientHeight);//chrome/FF/IE10:200px,height+padding;34        console.log(‘div的clientWidth为：‘+div.clientWidth);//chrome/FF/IE10:200px,width+padding35       36     </script>37 </body>  38 </html>

运行结果（chrome、ff、ie10）：

 

于是，我们便可以利用clientWidth和clientHeight做一些事了，比如说计算浏览器视口的大小（<html>或<body>元素的大小）。

 1 function getViewPort(){ 2   if(document.compatMode == ‘BackCompat‘){ 3      return { 4         width:document.body.clientWidth, 5         height:document.body.clientHeight 6      }; 7   }else{ 8     return { 9       width:document.documentElement.clientWidth,10       height:document.documentElement.clientHeight11     };12   }13 }14 getViewPort();

Look：

     上图中红框框的大小正好就是1349*284.（注，不包括滚动条），截图的时候都能正好看到大小的喔。

And Look：

上面红框框的大小就是894*198.

 

这样我们就能准确的得到浏览器视口的大小啦。

 

 

三、滚动大小（scrollWidth/scrollHeight/scrollLeft/scrollTop）

     有些元素，即使没有执行任何代码也会自动的添加滚动条，如<html>,但是另外一些元素，则需要通过css的overflow属性进行设置才能滚动。

     通常认为<html>元素是在web浏览器的视口中滚动的元素（ie6之前版本运行在混杂模式下是<body>元素，这也是上面计算视口大小代码if，else的原因），因此带有垂直滚动条的页面总高度就是document.documentElement.scrollHeight。

     

 

   但是，书上说：对于不包含滚动条的页面而言，scrollWidth和scrollHeight与clientWidth和clientHeight之间的关系并不是十分清晰。

   但是我基于document.documentElement测试这些属性，视口大小是视口大小，文档大小是文档大小，并无特别：（我还是比较相信实践出来的真实情况的，有问题 欢迎大家留言一起学习）

 

 

<!DOCTYPE html><html lang="zh"><head><meta charset=utf-8><title>元素大小相关（offsetTop/clientHeight/scrollTop~）</title></head> <style>    html,body{    margin:0;    padding: 0;    overflow: hidden;/*不包含滚动条*/  }  .div {    width: 1000px;    height:1000px;  }</style>      <body>    <div class="div"> </div>    <script>       console.log(‘无滚动条document.documentElement.clientHeight为：‘+document.documentElement.clientHeight);       console.log(‘无滚动条document.documentElement.clientWidth为：‘+document.documentElement.clientWidth);       console.log(‘无滚动条document.documentElement.scrollHeight为：‘+document.documentElement.scrollHeight);       console.log(‘无滚动条document.documentElement.scrollWidth为：‘+document.documentElement.scrollWidth);          </script></body>  </html>

 

 ie10：

chrome：

  

FF：

 

Tips：

在确定文档的总高度时，必须取得scrollWidth、clientWidth和scrollHeight、clientHeight中的最大值，这样才能保证在跨浏览器的情况下取得较为准确的结果。

 

页面元素大小相关（offsetWidth、clientWidth、scrollWidth等）详解笔记


联系
我们