关于js里面的一些距离和宽高

js中常用的获取距离以及宽高的方法

1.document.documentElement.clientWidth;    //获取当前浏览器内容宽度，不包含菜单栏，滚动条，浏览器边框
2.document.documentElement.clientHeight;   //获取当前浏览器内容高度
3.screen.width;    //获取电脑屏幕的分辨率宽度（与浏览器宽高无关）
4.screen.height;   //获取电脑屏幕的分辨率高度（与浏览器宽高无关）
5.document.body.scrollTop/document.documentElementscrollTop; //获取浏览器滚动条距离顶部的高度

----------

1.obj.clientWidth/obj.clientHeight;  // 获取元素的内容以及padding值的和（width/height+padding）
2.obj.offsetWidth/obj.offsetHeight;  // 获取元素的内容+padding+margin的值的和（width/height+padding+margin）
3.obj.offsetLeft/obj.offsetTop;      // 获取元素到它定位父级的left/top值
4.obj.scrollWidth/obj.scrollHeight;  // 获取元素内部内容的滚动宽高；

关于常用的页面的宽高以及滚动高度；

1.document.documentElement.clientWidth; //获取当前浏览器内容宽度，不包含菜单栏，滚动条，浏览器边框
2.document.documentElement.clientHeight; //获取当前浏览器内容高度
3.window.innerWidth; //和document.documentElement.clientWidth的方法相同，但不兼容IE8及以下

4.screen.width; 获取电脑屏幕的分辨率宽度（与浏览器宽高无关）
5.screen.height; 获取电脑屏幕的分辨率高度（与浏览器宽高无关）

6.获取浏览器滚动条距离顶部的高度：
有两种写法（1）document.body.scrollTop （2）document.documentElementscrollTop
这两种写法都可以获取到滚动条的高度，但是存在兼容性的问题，如下图

在webkit内核的浏览器中，document.documentElementscrollTop的获取方法是无效的，获取到的永远是0，同样的方法发现，document.body.scrollTop方法在IE浏览器中获取到的也是0，那么就要把两者结合起来，做到兼容：

alert(document.documentElementscrollTop||document.body.scrollTop)

这样写，当document.documentElementscrollTop的值为0的时候，会自动获取document.body.scrollTop的值，反过来也一样。

关于页面中div的宽高以及滚动高度；

1.obj.clientWidth/obj.clientHeight; 获取元素的内容以及padding值的和（width/height+padding）

2.obj.offsetWidth/obj.offsetHeight; 获取元素的内容+padding+margin的值的和（width/height+padding+margin）

3.obj.offsetLeft/obj.offsetTop; 获取元素到它定位父级的left/top值

4.obj.scrollWidth/obj.scrollHeight; 获取元素内部内容的滚动宽高；
(1)。如第一张图，当div里面内容没有超出的时候，获取到的height值等于clientHeight的值；
(2)。第二张图，当div里面的内容超出div的时候，实际内容的高度应该是大红框的高度，就算设置了overflow：hidden，获取到的值依旧是内容的实际高度。
(3)。该方法在不同浏览器中都兼容，但是在不同浏览器中获取的值也不一样，会有误差，不过相对来说并不影响，因为实际操作中不同的值会有不同的操作方法