Javascript 獲取頁面中元素的高度和寬度


1、  獲取頁面和元素可視高度,可視寬度值。

2、  獲取頁面和元素實際的高度,實際的寬度的值。

3、  獲取滾動條的高度(頁面滾動的高度)

 

第一種方法通過javascript來獲取上面內容的值。

獲取文檔可視窗口大小:火狐,谷歌,歐朋瀏覽器提供了一個window.innerWidth和window.innerHeight方法來獲取串口的可視大小。IE6以上的瀏覽器提供了一個document.documentElement.clientWidth和document.documentElement.clientHeight來獲取文檔可視窗口的大小,IE6以下使用document.body.clientWidth。但同時火狐,谷歌,歐鵬瀏覽器也支持document.documentElement.clientWidth方法,所以所有的瀏覽器可以統一使用document.documentElement.clientWidth來獲取文檔可視窗口的大小。

獲取元素可視窗口的大小同樣可以使用document. getElementById(“elem”).clientWidth。但是為了保證所有瀏覽器的兼容性,必須保證elem是塊級元素,並且設置了寬高屬性。

 

獲取文檔窗口實際大小:document.body.scrollWidth(窗口寬度)。Document.body.scrollHeight(窗口高度)。

 

獲取文檔滾動條的滾動的高度和寬度,左偏移,和上偏移:封裝在一個函數scrollget()中

Function scrollget(){

         Var w,h,t,l;      

    if (document.documentElement && document.documentElement.scrollTop) {

        t = document.documentElement.scrollTop;

        l = document.documentElement.scrollLeft;

        w = document.documentElement.scrollWidth;

        h = document.documentElement.scrollHeight;

    }

    else if (document.body) {

        t = document.body.scrollTop;

        l = document.body.scrollLeft;

        w = document.body.scrollWidth;

        h = document.body.scrollHeight;

    }        Return {w:w,h:h,t:t,l:l}

}

 

 

第二種方法我們通過jQuery框架來獲取上面內容的值。

 

獲取文檔的實際高度和寬度:$(“body”).height()和$(“body”).width();

 

獲取文檔滾動的高度:$(document).scrollTop();

 

Jquery 獲取可視窗口的大小方法本人沒發現;

 

文檔二:IE6中實現position:fixed。

 

Position:fixed定位在除了IE6下都能實現,是讓元素始終固定顯示在一個位置上面。但通常我們需要這個屬性利用js做一些效果例如回到頂部,懸浮層,懸浮菜單。下面就讓我們一切解決IE6下不能實現fixed屬性的方法。

提起這個IE6 bug的時候很多人都會想到我們可以用position:absolute屬性來實現IE6 下面這種情況。但是一開始我測試的時候_position:absolute;卻並不能達到我們想要fixed的這種效果。后來在網上參考了一些文章知道了有一種實現方法。

方法一:

在頁面中寫上如下代碼

<!—[if IE 6]>

         <style>

                   Html{ overflow:hidden; }

                   Body{ overflow:auto; height:100%;}

                   #fixed{ position:absolute; top:100px; right:100px; }

         </style>

<![endif]-->

其它瀏覽器直接寫#fixed{ position:fixed; top:100px; right:100px;}

如果深入研究我們會發現 這種代碼是有弊端的那就是:這會使頁面上原有的absolute、relation都變成fixed的效果.花了一些時間在網上搜尋其它的解決方法就找到了如下的第二種方法。

 

方法二:

先上代碼:

/* 除IE6瀏覽器的通用方法 */

.ie6fixedTL{position:fixed;left:0;top:0}

.ie6fixedBR{position:fixed;right:0;bottom:0}

/* IE6瀏覽器的特有方法 */

.ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft));top:expression(eval(document.documentElement.scrollTop))}

.ie6fixedBR{position:absolute;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)))}

 

這種方法就是利用css表達式expression這種方法來計算距離的。上面的情況是沒有考慮margin,padding,border的情況下,比如我要讓某個元素距頂部10個像素,距左部也是10個像素,那就要這樣子寫:

.ie6fixedTL{position:absolute;left:expression(eval(document.documentElement.scrollLeft+10));top:expression(eval(document.documentElement.scrollTop+10))}

這種情況下頁面滾動的時候,這個層會抖動為了解決這個問題寫上如下代碼:

Body{ background:url(about:blank) fixed;}

IE6下 僅在body的背景圖片上才有fixed屬性。

 

Css表達式影響性能,但是為了兼容IE6 有時候也是無可奈何。以上兩種情況可以根據情況使用。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM