js中元素的各種寬高圖文詳解

主要看這張圖，感覺圖的意思很清晰了

1 .與client相關的寬高

• clientWidth/clientHeight——元素的可視部分的寬度和高度，即padding content，如果出現滾動條，則要減去相應滾動條的寬度。

• 無padding無捲軸：clientWidth = style.width

• 有padding無捲軸：clientWidth = style.width style .padding*2

• 有padding有捲軸，且捲軸是顯示的：clientWidth = style.width style.padding*2-捲軸寬度

• clientLeft/clientTop－元素周圍邊框的厚度，如果不指定一個邊框或不定位該元素，其值為0。

• clientLeft = border-left的border-width

• clientTop = border-top的border-width

#2.與offset相關的寬高

• offsetWidth/offsetHeight——border padding content。此屬性及其內部的內容是否超出元素大小無關，只和本來設定的border及width和height有關。

• 無padding無捲軸無border：offsetWidth = clientWidth = style.width

• ##有padding無滾動條有border： offsetWidth = style.width style.padding*2 border寬度*2 = clientWidth border寬度*2

##有padding有捲軸，且捲軸是顯示的，有border：offsetWidth = style.width style.padding * 2 border寬度* 2 = clientWidth 滾動軸寬度border寬度*2
offsetLeft/offsetTop－與offsetParent有關，而且存在相容
#如果目前元素的父級元素沒有進行css定位(position為absolute或relative)，offsetParent為body；如果當前元素的父級元素中有css定位(position為absolute或relative)，offsetParent取最近的那個父級元素。
IE6/7：offsetLeft=(offsetParent的padding-left) (目前元素的margin-left);
IE8/9/ 10及Chrome中：offsetLeft=(offsetParent的margin-left) (offsetParent的border寬度) (offsetParent的padding-left) (目前元素的margin-left);
FireFox中：offsetLeft=(offsetParent的margin-left) (offsetParent的padding-left) (當前元素的margin-left);

• 3.與scroll相關的寬高－scrollWidth/scrollHeight－document.body的scrollWidth和scrollHeight與p的scrollWidth和scrollHeight是有區別的

• ##body的scrollWidth和scrollHeight

• 給定body寬高小於瀏覽器視窗：scrollWidth通常是瀏覽器視窗的寬度；scrollHeight通常是瀏覽器視窗的高度。

• 給定body寬高大於瀏覽器窗口，且內容小於給定寬高：scrollWidth=給定的寬度 padding margin border；scrollHeight = 給定的高度 padding margin border。

• 給定body寬高大於瀏覽器窗口，且內容大於給定寬高： scrollWidth=內容寬度padding margin border；scrollHeight = 內容高度padding margin border

#p的scrollWidth和scrollHeight（火狐會把body當作p來處理）

無滾動軸時：scrollWidth=clientWidth=style.width style.padding *2。

有滾動軸時：scrollWidth=實際內容的寬度 padding*2; scrollHeight = 實際內容的高度 padding*2。

以上是js中元素的各種寬高圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！