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

                                 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:

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

五、别人的图：

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

 

 

六、个人总结：

        1，上述说的，是在单一浏览器下面测试的结果，必然，在其他的浏览器下面的结果会有出入，但是，本文的重点是要了解那几个概念，知道大致是如何运算的，具体的测量方法，视具体的浏览器来看，当然，你也可以开发一个浏览器，设计一个另类的计算方法，但是，请不要把概念另类，否则，那个浏览器就可能只会运行你自己写的代码了。

      2，浏览器的差异性，是一个很让人头疼的问题，但是，幸好一些框架的出现，在努力的解决这个问题，让web开发人员全身心的投入到程序设计的思想中 去，而不是在 把精力心思花在这个上面，当然，这得辛苦框架开发人员了。

      3，谢谢，写博客时查阅了很多资料，向作者表示感谢。

      4，很高兴与感兴趣的朋友交流，欢迎一起交流学习