首頁  >  文章  >  web前端  >  js中元素的各種寬高圖文詳解

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

php是最好的语言
php是最好的语言原創
2018-08-10 09:36:112276瀏覽

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

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。

######scrollLeft/scrollTop-可讀寫,捲起的高度########### 相關推薦:########js取得Html元素的實際寬度高度的方法############取得一組元素的最大寬度或高度JavaScript程式碼#########

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn