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
offsetWidth/offsetHeight——border padding content。此屬性及其內部的內容是否超出元素大小無關,只和本來設定的border及width和height有關。
無padding無捲軸無border:offsetWidth = clientWidth = style.width
3.與scroll相關的寬高-scrollWidth/scrollHeight-document.body的scrollWidth和scrollHeight與p的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中文網其他相關文章!