Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft

 

二、涉及问题和总体概括：

         如果你对width，offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft这几个的差别还不是很熟悉，那你最好翻阅资料搞清楚，

当然，你也可以看一下本文（虽然写的很差劲）；这几个概念，你会在开发的时候经常用到，因此，掌握还是很有必要的。

        首先来说一下，**width，**left    (**height和**top是一样的，),一个是本身宽度计算问题，一个是一点到另外一点的距离问题，这几个概念代表的意义在很多浏览器大致相同，但是，计算方法会有所差别，所以，才会导致很混乱。

三、问题的由来：

           这得要先从height/width说起，看图，从w3c截取下来的：

   
   
        看了上图，想必你对高度有一点认识了吧，以width为例，其实，width是html元素的style的对象的一个属性，如果你直接使用element.width不加style的时候，会出现未定义的警告的。

         html的很多元素(div,p)都可以通过style来设置width，拿div来说，width=50px，代表了这个div的内容区域可以存放50px的东西，但是，当你放一个内容大小超过50px的东西在这个div时候，就会出现问题，比如说文字溢出，会破坏整体排版；那怎么解决这个问题呢？人们想到了控制溢出元素的的内容的显示方法方式 来解决这个问题。
         于是，人们想到设置一个overflow属性来解决这个问题，当内容超出容器的大小时，会根据overflow的值来判断该怎么做，比如说hidden，让超出的部分不显示，当然，最常用的还是scroll（滚动），你可以通过移动滚动条来查看溢出的内容（看下图滚动的由来），（这个滚动功能好强大，很多文字图片滚动就是根据这个来的哦）。

        于是问题是解决了， 但是，意料之外情理之中的事情又出现了，因为这个又导致了一些细节性的问题，因为出现了滚动，先前的height代表的值已经很难满足浏览器的需求了，有一部分内容被隐藏，那这部分的内容大小该如何用什么名词表示呢？你当前能看到的内容又该用什么名词表示呢？这篇文章中提到的那几个英文单词就是来描述这个的。
        这下好了，看得见的内容，看不见的都有名字了，问题解决了。但是，这世界上面有很多 的浏览器，不同厂家的，例如chrome，Firefox，IE等，同一厂家，由于年代的久远又有很多不同的版本，这些不同的厂家的不同版本的浏览器计算上述几个名词的方法不一样，因此，就造成了计算公式不清楚的问题，进而导致对这几个名词搞得有些混乱，我也是受害者。想清楚的了解这几个名词，一定要抓住重点，我们需要清楚的问题是这几个名词代表什么意思，其次再搞清楚计算方法，当然，由于不同浏览器差异，可能计算方法一时半会记不住，但是，这几个名词代表的意思一定要清楚！！！

四、具体的阐述

       ★ 在这里，先谈**Width和**Height，然后，再谈**Left和**Top，由于width和height只是一个方向差别问题，其他的都一样，下文只会就其一个展开来讲，**Left和**Top也               是一样。

           a，**Width和**Height：

     1，clientWidth/clientHeight：

请看下图，图中描述的很详细了：clientWidth/clientHeight是可见内容的宽度和高度，就是你看见的内容部分多大，他就多大。

2，offsetHeight/offsetWidth

            请看下图，应该还是很详细了，注意与clientHeight的区别，offsetHeight/offsetWidth是当前对象大小，比如说div这个对象，它的style可能

会有width和border，那你就要将它计算在内

3，scrollWidth/scrollHeight:

                再看图  (不要问为啥，图上面是我一点一点测试的实实在在的数据)，这个代表了元素内容的实际宽高，包含padding，注意与height的区别。

        当然，不设置padding 的话，在保证其他要求一样的情况下，可以认为数值相等。
       

        b，**Left和**Top：

              1，clientLeft/clientTop:

请看下图：这个还是很好理解的这里不做介绍了。

2，offsetTop/offsetLeft:

又要看图，看图说话嘛，嘿嘿，这个，图中已经讲解的清楚了。

3，scrollTop/scrollLeft:

看图，就是被卷起来的那部分内容的宽度或者高度，也是被隐藏在滚动条左侧(上侧)的页面的宽度。

五、别人的图：

  如果上面的你都明白了的话，那下面这幅图，会加深你的理解，

转自：

作者：小小码农形成中 
来源：CSDN 
原文：https://blog.csdn.net/qq_24754061/article/details/51590492