jquery獲取文件高度和視窗高度的例子

2021-09-06 13:53:44 字數 1639 閱讀 1561

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()值有問題,返回的不是瀏覽器視窗的高度?

原因:網頁沒有加上宣告。

懶人建站整理js獲取頁面高度和視窗高度

實際應用:設定內容區域合適的高度

**如下

複製**

//設定內容區域合適高度

var doch = $(document).height(),

winh = $(window).height(),

headerh = $(".header").outerheight();

footerh = $(".footer").outerheight();

if(doch<=winh+4)

注:winh+4 因為ie8下只有4畫素偏差

例**如下

複製**

// 獲取頁面的高度、寬度

function getpagesize() else else else else else else else {

pagewidth = windowwidth;

arraypagesize = new array(pagewidth, pageheight, windowwidth, windowheight);

return arraypagesize;

// 滾動條

document.body.scrolltop;

$(document).scrolltop();

你可能感興趣的文章

jquery獲取文件高度和視窗高度問題

document height 整個網頁的文件高度 window height 瀏覽器可視視窗的高度 經過測試 無論是視窗高度還是文件高度 其實值是相等的。都會隨著瀏覽器視窗的縮放而變化,注意 ie8下面 獲取到的 document height 文件高度值,比實際高度多4px。比如獲取的是768p...

jquery獲取視窗高度的方法

window height 獲取的是當前可視視窗的高度,也就是使用者能看到的視窗的高度,是不變的 在視窗大小不變的前提下 document height 獲取的是視窗內文件的高度,這個高度隨著文件內容的高度改變而改變 當視窗滾動條滾到最低端時,document height window heigh...

jQuery視窗 文件各種高度的理解

document height 整個網頁的高度 window height 瀏覽器可視視窗的高度 window scrolltop 瀏覽器可視視窗頂端距離網頁頂端的高度 垂直偏移 用一句話理解就是 當網頁滾動條拉到最低端時,document height window height window s...