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

在学习过程中也好，实际开发中也好，总会碰到各种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+padding
35        console.log(‘div的offsetLeft为：‘+div.offsetLeft);//chrome/FF/IE10:300px,margin(注，若body不加如上样式，则会308px)
36        console.log(‘div的offsetTop为：‘+div.offsetTop);//chrome/FF/IE10:200px,margin
37     </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+padding
35
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.clientHeight
11     };
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：