js、jQuery 獲取文檔、窗口、元素的各類值

基於兩年開發經驗，總結了 javascript、jQuery 獲取窗口、文檔、元素的各類值

javascript：

文檔：是整個document全部的內容

瀏覽器當前窗口文檔body的寬度： document.body.clientWidth;(僅僅是body的width)
瀏覽器當前窗口文檔body的高度： document.body.clientHeight;(僅僅是body的height)

瀏覽器當前窗口文檔body的寬度： document.body.offsetWidth;(width+border);
瀏覽器當前窗口文檔body的高度： document.body.offsetHeight;(height+border);

瀏覽器整個文檔的寬： document.body.scrollWidth;
瀏覽器整個文檔的高： document.body.scrollHeight;

獲取豎直滾動條到頂部的垂直高度 (即網頁被捲上去的高度)(其餘瀏覽器)：document.body.scrollTop;
獲取豎直滾動條到頂部的垂直高度 (即網頁被捲上去的高度)(ie瀏覽器): document.documentElement.scrollTop;
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度)(其餘瀏覽器)： document.body.scrollLeft;
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度)(ie瀏覽器)： document.documentElement.scrollLeft;

滾動條中內容的高度：boxx.scrollHeight;//利用這個能夠使滾動條一直在底部

網頁正文部分上： window.screenTop;
網頁正文部分左： window.screenLeft;

獲取元素的寬度：clientWidth;(width+padding)
獲取元素的高度：clientHeight;(height+padding)

獲取元素的寬度：offsetWidth;(width+padding+border)
獲取元素的高度：offsetHeight;(height+padding+border)

獲取元素最左邊距已定位的父級對象的長度（若無父級對象或父級對象沒有定位，就是距離文檔頂部）:offsetLeft
獲取元素最上邊距已定位的父級對象的長度（若無父級對象或父級對象沒有定位，就是距離文檔左端）:offsetTop

屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工做區高度： window.screen.availHeight
屏幕可用工做區寬度： window.screen.availWidth

jQuery：

文檔：是包括滾動條全部的內容

獲取瀏覽器顯示區域（可視區域）的高度 ： $(window).height();
獲取瀏覽器顯示區域（可視區域）的寬度 ： $(window).width();

獲取頁面的文檔高度：$(document).height();
獲取頁面的文檔寬度 ：$(document).width();

瀏覽器當前窗口文檔body的高度： $(document.body).height();
瀏覽器當前窗口文檔body的寬度： $(document.body).width();

獲取豎直滾動條到頂部的垂直高度 (即網頁被捲上去的高度) ：$(document).scrollTop();
獲取水平滾動條到左邊的水平寬度 (即網頁被卷左去的寬度)：$(document).scrollLeft();

獲取或設置元素的寬度：$(obj).width();(width) 注意只是元素的寬度，不包括padding
獲取或設置元素的高度：$(obj).height();(height) 注意只是元素的高度，不包括padding

獲取或設置元素的寬度：$(obj).innerWidth(); (width + padding)
獲取或設置元素的高度：$(obj).innerHeight(); (height + padding)

獲取或設置元素的寬度：$(obj).outerWidth(); (width + padding + border)
獲取或設置元素的高度：$(obj).outerHeight(); (height + padding + border)

獲取元素的寬度：$(obj).outerWidth(true); (width + padding + border + margin)
獲取元素的高度：$(obj).outerHeight(true); (height + padding + border + margin)

某個元素的上邊界距文檔最上邊距離：obj.offset().top;
某個元素的左邊界距文檔最左邊距離：obj.offset().left;

 

鼠標移動：

screenY：
鼠標相對於顯示器屏幕左上角的偏移

pageY：
鼠標相對於頁面左上角的偏移 (其值會受滾動條的影響，至關於整個文檔，整個頁面的Y的值)
IE9之下並不支持這個屬性

clientY：
鼠標相對於瀏覽器窗口左上角的偏移（其值不會受滾動條影響，相對於滾動條當前的位置的瀏覽窗口的Y值）
注意clientY和pageY的區別，pageY在頁面無滾動條或滾動條下拉0的狀況下值等同於clientY

event.offsetX 相對容器的水平座標
event.offsetY 相對容器的垂直座標

layerY：
若是元素的position樣式不是默認的static,咱們說這個元素具備定位屬性。
在當前觸發鼠標事件的元素和它的祖先元素中找到最近的具備定位屬性的元素，計算鼠標與其的偏移值，
以找到元素的border的左上角的外交點做爲相對點。若是找不到具備定位屬性的元素，那麼就相對於當前頁面計算偏移，此時等同於pageY。

offsetY ：
offsetY和layerY的不一樣在於，前者的在計算偏移值時，相對於元素的border左上角的內交點，
所以當鼠標位於元素的border上時，偏移值是一個負值。
另外offsetY並不在意觸發事件的元素是否有定位屬性，它老是相對於觸發事件的元素來計算偏移值。

鑑於layerY和offsetY的不一樣，要兼容的使用兩者要注意 　　1.觸發事件的元素必定要設置定位屬性。 　　 2.在元素具備上邊框border-top的狀況下， layerY比offsetY的值多一個border-top的寬度值。