JS盒子模型

2022-08-28 00:24:07 字數 989 閱讀 1145

6.js盒子模型:3x4+1 =13 個屬性

client系列:

clientheight/clientwidth:內容的寬度/高度+左右/上下填充(padding)和內容溢位沒有關係(不包括邊框高度)

clinettop:上邊框的高度

clinetleft:左邊框的寬度

offset系列:

offsetwidth/offsetheight:clientwidth/clientheight+左右/上下邊框

offsetparent:當前元素的父級參照物

offsettop/offsetleft:當前元素的外邊框距離父級參照物的內邊框距離的偏移量

scroll系列:

scrollwidth/scrollheight:和clientwidth/clientheight一樣(前提是內容沒有溢位)

如果內容有溢位(設定overflow=hidden後)

scrollwidth:真實內容的寬度(包含溢位)+左填充

scrollheight:真實內容的高度(包含溢位)+上填充

scrollleft/scrolltop:滾動條卷去的寬度/高度

瀏覽器盒子模型相容寫法

function

win(attr,value)

document.documentelement[attr]=value;

document.body[attr] =value;

}

js盒子模型

通過js中提供一系列的方法和屬性獲取頁面中元素的樣式資訊值 內容的寬高 是給元素定義的width height這兩個樣式。如果沒有設定height值,容器的高度會根據裡面內容自己適應,這樣獲取的值就是真實的內容的高 如果設定固定的高度,不管內容是多少,內容的高度指的都是設定的這個值 真實內容的寬高 ...

js盒子模型

js盒子模型是指通過js中一系列的屬性和方法獲取頁面中元素的樣式資訊值 1 client系列 clientwidth 設定的寬度 width 內邊距 padding 2 clientheight 設定的高度 height 內邊距 padding 2 clientleft 左邊框的寬度 border的...

JS盒子模型

clientwidth 盒子寬度 左右的padding clientheight 盒子高度 上下的padding clientleft 盒子左邊框的寬度 clienttop 盒子上邊框的寬度 offsetwidth clientwidth 左右border offsetheight clienthe...