js获取元素宽高、位置相关知识汇总

常见clientWidth、clientHeight、offsetWidth、offsetLeft，clientX、scrollTop等词语，比较混乱，现在总结下他们的区别。

1. clientWidth：元素的宽度（width+padding），offsetWidth相比clientWidth，多个border的值 ( width+padding+border)。clientHeight 、 offsetHeight略

//某个元素的宽度和高度
var div1 = document.getElementById('div1');
console.log('元素的宽width+padding',        div1.clientWidth );

//body的宽度
console.log('body的宽',document.body.clientWidth);

//可视区的宽度，也就是html的宽度
console.log('可视区的宽', document.documentElement.clientWidth );

//可视区的宽度高度:你可以调整浏览器窗口大小调整的，body的高度不设置的话是根据内容来的，内容少，浏览器不出现滚动条，body的高度小于可视区高度，内容多，浏览器出现滚动条，body的高度大于可视区高度。

但是css3有个属性：box-sizing

box-sizing: content-box|border-box|inherit

比如，div1设置

1     <style type="text/css">
2         #div1 {
3             width: 200px;
4             height: 200px;
5             padding: 50px;
6             border: 10px solid #000000;
7         }
8     </style>

box-sizing默认是content-box，就是width不包含padding和border的模式，测试，IE7+及其他浏览器正常，显示 clientWidth为50+200+50=300，offsetWidth为10+50+200+50+10=320，多了2边的border。

IE6下clientWidth为180，offsetWidth为200，因为6下的width是包含padding和border的，但是没人用ie6了，不细说

但是说明一个问题，clientWidth显示的很准确，就是实际width+padding的值，ie6下这个值比较小，也显示小了。

div1加上 box-sizing:border-box;再看看什么反应，IE7不认识 box-sizing:border-box; 出现结果和不加 box-sizing:border-box;一样，其他浏览器都是 clientWidth为180，offsetWidth为200。

结论就是：

1.clientWidth的值挺准确的，去掉边框的“盒子”占多少像素就显示多少像素。box-sizing的设置影响到了实际显示，也自然的影响到了clientWidth的值。

2.offsetWidth就是clientWidth加上两边border

3.clientWidth的值可以读，但是不能写。例如写： div1.clientWidth = 500; div1并不会变大，有些浏览器报警告或错误。

2. clientX，clientY是事件中的概念，鼠标点击时候距离可视区的左侧和上侧坐标，数据是在事件的细节的event对象中

1         document.onclick = function (ev) {
2             //IE和谷歌用window.event
3             //火狐等用事件函数的第一个参数
4             var ev = ev || window.event;
5             console.log(ev.clientX,ev.clientY);            
6         }

3.scrollTop、scrollLeft 是指页面内容太长，有滚动条了，已经滚动的距离。上面clientX和clientY都是针对可视区的，但是很多时候，我们想知道的是针对页面内容的距离，才方便我们下一步定位等操作，所以要结合scrollTop、scrollLeft使用

但是，但是，要注意：scrollTop它们存在兼容性问题。

浏览器出现滚动条是谁的？答：只有谷歌浏览器认为滚动条是body的（document.body.scrollTop），其他浏览器都认为是html的，也就是可视区的（document.documentElement.scrollTop），为了在有限的范围显示大页面，才出现的滚动条。为了兼容，代码如下：

        
        //有scrollTop和scrollLeft,没有scrollBottom和scrollRight
        document.onscroll = function(){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(scrollTop);
        }

4. 待续