在青春中探索，在岁月中沉淀、在失去中珍惜。
一、获取页面可视宽高
获取可视高
window.innerHeight || document.documentElement.clientHeight
// window.innerHeight（除IE均支持，如果底部出现滚动条，则包括滚动条的宽）
// document.documentElement.clientHeight（兼容IE，包括滚动条的宽）
获取可视宽
window.innerWidth || document.documentElement.clientWidth
window.innerWidth（包括滚动条的宽）
document.documentElement.clientWidth（不包括滚动条的宽）
二、获取页面内容宽高
获取内容高
document.body.scrollHeight || document.body.offsetHeight
获取内容宽（略）
三、获取屏幕宽高
获取屏幕宽
window.screen.width
获取屏幕高
window.screen.height
四、获取element宽高和位置
1、获取element位置
element.offsetLeft //元素相对于窗口的left
element.offsetTop //元素相对于窗口的top
offset.png
2、获取element宽高
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = width + padding + border
client.. 比 offset.. 多出了border的宽度
五、根据视口获取相对位置
element.getBoundingClientRect()
image.png
clientRect.png
六、滚动条滚动的距离
获取距离顶部的滚动距离
document.documentElement.scrollTop || document.body.scrollTop
document.documentElement.scrollTop(谷歌、火狐均支持)
document.body.scrollTop(兼容ie)
获取距离左边的滚动距离
document.documentElement.scrollLeft || document.body.scrollLeft
七、jquery中的方法
获取浏览器显示区域（可视区域）的高度 ：
$(window).height();
获取浏览器显示区域（可视区域）的宽度 ：
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度 ：
$(document).width();
浏览器当前窗口文档body的高度：
$(document.body).height();
浏览器当前窗口文档body的宽度：
$(document.body).width();
获取滚动条到顶部的垂直高度 (即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度 ：
$(document).scrollLeft();
获取或设置元素的宽度：
$(element).width();
获取或设置元素的高度：
$(element).height();
某个元素的上边界到body最顶部的距离：element.offset().top;（在元素的包含元素不含滚动条的情况下）
某个元素的左边界到body最左边的距离：element.offset().left;（在元素的包含元素不含滚动条的情况下）
返回当前元素的上边界到它的包含元素的上边界的偏移量：element.offset().top（在元素的包含元素含滚动条的情况下）
返回当前元素的左边界到它的包含元素的左边界的偏移量：element.offset().left（在元素的包含元素含滚动条的情况下）
