JS中關於clientWidth offsetWidth scrollWidth 等的含義

網頁可見區域寬: document.body.clientWidth; 是對象可見的寬度,不包滾動條等邊線,會隨窗口的顯示大小改變。 
網頁可見區域高: document.body.clientHeight;
網頁可見區域寬: document.body.offsetWidth   (包括邊線的寬);   是對象的可見寬度,包滾動條等邊線,會隨窗口的顯示大小改變。 

網頁可見區域高: document.body.offsetHeight  (包括邊線的寬);
網頁正文全文寬: document.body.scrollWidth;   是對象的實際內容的寬,不包邊線寬度,會隨對象中內容的多少改變(內容多了可能會改變對象的實際寬度)。

網頁正文全文高: document.body.scrollHeight;
網頁被捲去的高:
document.body.scrollTop;
網頁被捲去的左:
document.body.scrollLeft;
網頁正文部分上:
window.screenTop;
網頁正文部分左:
window.screenLeft;
屏幕分辨率的高:
window.screen.height;
屏幕分辨率的寬:
window.screen.width;
屏幕可用工作區高度:
window.screen.availHeight;
屏幕可用工作區寬度:window.screen.availWidth;

1offsetWidth width+padding+border) 當前對象的寬度。

style.width也是當前對象的寬度(width+padding+border)

區別:1)style.width返回值除了數字外還帶有單位px

           2)如對象的寬度設定值爲百分比寬度,則無論頁面變大還是變小,

              style.width都返回此百分比,offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值;

           3)如果沒有給 HTML 元素指定過 width樣式,則 style.width 返回的是空字符串;

2offsetHeight :(Height+padding+border)

當前對象的高度。

style.height也是當前對象的高度(height+padding+border)

區別:1)style.height返回值除了數字外還帶有單位px

           2)如對象的高度設定值爲百分比高度,則無論頁面變高還是變矮,

              style.height都返回此百分比,offsetHeight則返回在不同頁面中對象的高度值而不是百分比值;

           3)如果沒有給 HTML 元素指定過 height樣式,則 style.height返回的是空字符串;

3offsetLeft :

當前對象到其上級層左邊的距離。

不能對其進行賦值.設置對象到其上級層左邊的距離請用style.left屬性。

style.left當前對象到其上級層左邊的距離。

區別:1)style.left返回值除了數字外還帶有單位px

           2)如對象到其上級層左邊的距離設定值爲百分比,

              style.left返回此百分比,offsetLeft則返回到其上級層左邊的距離的值;

           3)如果沒有給 HTML 元素指定過 left樣式,則 style.left返回的是空字符串;

4offsetTop :

當前對象到其上級層頂部邊的距離。

不能對其進行賦值.設置對象到上級層頂部邊的距離請用style.top屬性。

 

style.top當前對象到其上級層頂部邊的距離。

區別:1)style.top返回值除了數字外還帶有單位px

           2)如對象到其上級層頂部邊的距離設定值爲百分比,

              style.top返回此百分比,offsetTop則返回到其上級頂部邊的距離的值;

           3)如果沒有給 HTML 元素指定過 top樣式,則 style.top返回的是空字符串;

注意:如果上級層爲body,由於IEFFpaddingmargin的解釋不一樣所以要明確規定處理不是下列的區別就不成立了。

IE   1)如果Div的上級層是body,而divbody之間有個div,如body->div->divodivooffsetTop=divpadding+margin+boder

       2)如果Div的上級層是body,如body>divodivooffsetTop=divpadding+margin+boder

             divooffsetTop=divomargin>body.padding則爲divomargin,否則爲body.padding誰大是誰?

FF  上述兩種情況:offsetTop=margin+padding ;

(IEFF中的body默認padding10)IE6.0 FF3.6.13

5scrollWidth:獲取對象的滾動寬度

6scrollHeight: 獲取對象的滾動高度。

7scrollLeft:設置或獲取位於對象左邊界和對象中目前可見內容的最左端之間的距離(width+padding爲一體)

8scrollTop:設置或獲取位於對象最頂端和對象中可見內容的最頂端之間的距離;(height+padding爲一體)

9clientWidth: 獲取對象可見內容的寬度,不包括滾動條,不包括邊框;

10clientHeight: 獲取對象可見內容的高度,不包括滾動條,不包括邊框;

11clientLeft: 獲取對象的border寬度

12clientTop:獲取對象的border高度

13offsetParent :當前對象的上級層對象.

IE6.0FF1.06+
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

IE5.0/5.5
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

以上屬性測試的文檔類型爲:

<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果不寫文檔類型,瀏覽器就會按照 HTML 4.0 的方式來處理,則效果可能不同。

發佈了48 篇原創文章 · 獲贊 6 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章