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是元素的实际宽度。