在青春中探索，在歲月中沉淀、在失去中珍惜。
一、獲取頁面可視寬高
獲取可視高
window.innerHeight || document.documentElement.clientHeight
// window.innerHeight（除IE均支持，如果底部出現(xiàn)滾動條，則包括滾動條的寬）
// 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的寬度
五、根據(jù)視口獲取相對位置
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中的方法
獲取瀏覽器顯示區(qū)域（可視區(qū)域）的高度 ：
$(window).height();
獲取瀏覽器顯示區(qū)域（可視區(qū)域）的寬度 ：
$(window).width();
獲取頁面的文檔高度
$(document).height();
獲取頁面的文檔寬度 ：
$(document).width();
瀏覽器當前窗口文檔body的高度：
$(document.body).height();
瀏覽器當前窗口文檔body的寬度：
$(document.body).width();
獲取滾動條到頂部的垂直高度 (即網(wǎng)頁被卷上去的高度)
$(document).scrollTop();
獲取滾動條到左邊的垂直寬度 ：
$(document).scrollLeft();
獲取或設置元素的寬度：
$(element).width();
獲取或設置元素的高度：
$(element).height();
某個元素的上邊界到body最頂部的距離：element.offset().top;（在元素的包含元素不含滾動條的情況下）
某個元素的左邊界到body最左邊的距離：element.offset().left;（在元素的包含元素不含滾動條的情況下）
返回當前元素的上邊界到它的包含元素的上邊界的偏移量：element.offset().top（在元素的包含元素含滾動條的情況下）
返回當前元素的左邊界到它的包含元素的左邊界的偏移量：element.offset().left（在元素的包含元素含滾動條的情況下）
