jquery獲取文件高度和視窗高度彙總
阿新 • • 發佈：2018-12-27
jquery獲取視窗高度和視窗高度，$(document).height()、$(window).height()
- $(document).height()：整個網頁的文件高度
- $(window).height()：瀏覽器可視視窗的高度
- $(window).scrollTop()：瀏覽器可視視窗頂端距離網頁頂端的高度（垂直偏移）
- $(document.body).height();//瀏覽器當前視窗文件body的高度
- $(document.body).outerHeight(true);//瀏覽器當前視窗文件body的總高度 包括border padding margin
- $(window).width(); //瀏覽器當前視窗可視區域寬度
- $(document).width();//瀏覽器當前視窗文件物件寬度
- $(document.body).width();//瀏覽器當前視窗文件body的高度
- $(document.body).outerWidth(true);//瀏覽器當前視窗文件body的總寬度 包括border padding margin
用一句話理解就是：當網頁滾動條拉到最低端時，$(document).height() == $(window).height() + $(window).scrollTop()。
當網頁高度不足瀏覽器視窗時$(document).height()返回的是$(window).height()。
不建議使用$("html").height()、$("body").height()這樣的高度。
原因：
$("body").height()：body可能會有邊框，獲取的高度會比$(document).height()小；
$("html").height()：在不同的瀏覽器上獲取的高度的意義會有差異，說白了就是瀏覽器不相容。
$(window).height()值有問題，返回的不是瀏覽器視窗的高度？
原因：網頁沒有加上<!DOCTYPE>宣告。
js獲取頁面高度和視窗高度
實際應用：設定內容區域合適的高度
| 1 2 3 4 5 6 7 8 |
//設定內容區域合適高度
var
docH = $(document).height(),
winH = $(window).height(),
headerH = $(
".header"
).outerHeight();
footerH = $(
".footer"
).outerHeight();
if
(docH<=winH+4){
$(
"div.container"
).height(winH-headerH-footerH-50);
}
|
用心努力學習才會有收穫 既然選擇遠方，便只顧風雨兼程