scrollWidth、clientWidth、offsetWidth的区别；

偏移量

1. offsetWidth：元素在水平方向上占用的空间大小；包括元素的宽度、垂直滚动条宽度、边框、padding；
2. offsetHeight：元素的垂直方向上占用的空间大小；包括元素的高度、水平滚动条高度、边框、padding；
3. offsetLeft：元素的左外边框与父级元素的左内边框的距离；
4. offsetTop：元素的上外边框与父级元素的上内边框的距离；
5. offsetParent：返回一个对象的引用， 这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。

要获得某个元素在页面上的左偏移量、上偏移量一样： var oBox = document.getElementById("box");     function getElementLeft(obj){         var current = obj.offsetParent;         var thisLeft = obj.offsetLeft;         if(current != null){             thisLeft += current.offsetLeft;             current = current.offsetParent;         }         return thisLeft;     } console.log(getElementLeft(oBox));

客户区：

1. clientWidth：元素内容及其内边距所占空间大小 ；padding、width；不包括：border和margin
2. clientHeight：元素内容及其内边距所占空间大小 ；padding、width；不包括：border和margin
3. 不包括滚动条的占据的空间；一般用在确定浏览器视口的时候；

    function getViewport(){         if(document.compatMode == "CSS1Compat"){             return {                 width : document.documentElement.clientWidth,                 height : document.documentElement.clientHeight             }         }else{             return {                 width : document.body.clientWidth,                 height : document.body.clientHeight             }         }     } 滚动大小：

1. scrollWidth：在没有内容的情况下，元素内容的总宽度；
2. scrollHeight：在没有内容的情况下，元素内容的总高度；
3. scrollLeft：被隐藏在内容区域左侧的像素数；
4. scrollTop：被隐藏在内容区域右侧的像素数；

scrollWidth,clientWidth,offsetWidth的区别 情况1： 元素内无内容或者元素内容不超过可视区域，滚动条不出现的情况下。

scrollWidth=clientWidth，两者皆为内容可视区的宽度。

offsetWidth为元素的实际宽度。

情况2： 元素的内容超过可视区域，滚动条出现和可用的情况下；

scrollWidth>clientWidth。

scrollWidth为实际内容的宽度。

clientWidth是内容可视区的宽度。

offsetWidth是元素的实际宽度。