前端开发中的各种宽高获取整理

获取可视区的宽高

1. document.documentElement.clientWidth
2. document.documentElement.clientHeight

获致滚动条滚动距离

1. // 主流浏览器中，用下面的代码获取值
2. document.documentElement.scrollTop
3. document.documentElement.scrollLeft
5. // 搜狗浏览器、360 浏览器、IE 浏览器中，用下面的代码获取值
6. document.body.scrollTop
7. document.body.scrollLeft
9. // 兼容写法
10. document.documentElement.scrollTop || document.body.scrollTop

IE中获取需要加一个定时器，不然取到的值总是 0

1. setTimeout(function(){
2. console.log(document.body.scrollTop);
3. },100);

元素的内容宽高

1. //(获取所有子孙元素中最大值作为内容高)
2. oElement.scrollHeight
3. oElement.scrollWidth

只获取子元素宽高作为内容宽高

1. document.documentElement.offsetWidth
2. document.documentElement.offsetHeight