JS獲取各種寬度,高度解釋

2021-09-05 21:53:16 字數 2119 閱讀 1121

紅色是大塊的邊框,藍色是小塊的邊框,藍框外白色區域是大塊的 padding 或/和 小塊的 margin 或其他元素或其他原因造成的空白。

obj.offsettop 指 obj 相對於版面或由 offsetparent 屬性指定的父座標的計算上側位置,整型,單位畫素

obj.offsetleft 指 obj 相對於版面或由 offsetparent 屬性指定的父座標的計算左側位置,整型,單位畫素。

obj.offsetwidth 指 obj 控制項自身的絕對寬度,不包括因 overflow 而未顯示的部分,也就是其實際佔據的寬度,整型,單位畫素。

obj.offsetheight 指 obj 控制項自身的絕對高度,不包括因 overflow 而未顯示的部分,也就是其實際佔據的高度,整型,單位畫素。

scrolltop、scrollleft、scrollwidth、scrollheight

被滾動條捲起的高度.

有w3c鏈結引用:document.documentelement.scrolltop

無w3c鏈結引用:document.body.scrolltop

ie 和 firefox 全面支援,而 netscape 8 和 opera 7.6 不支援 scrolltop、scrollleft(document.body.scrolltop、document.body.scrollleft 除外)。

clientheight

大家對 clientheight 都沒有什麼異議,都認為是內容可視區域的高度,也就是說頁面瀏覽器中可以看到內容的這個區域的高度,一般是最後乙個工具條以下到狀態列以上的這個區域,與頁面內容無關。

offsetheight

ie、opera 認為 offsetheight = clientheight + 滾動條 + 邊框。

ns、ff 認為 offsetheight 是網頁內容實際高度,可以小於 clientheight。

scrollheight

ie、opera 認為 scrollheight 是網頁內容實際高度,可以小於 clientheight。

ns、ff 認為 scrollheight 是網頁內容高度,不過最小值是 clientheight。

簡單地說

clientheight 就是透過瀏覽器看內容的這個區域高度。

ns、ff 認為 offsetheight 和 scrollheight 都是網頁內容高度,只不過當網頁內容高度小於等於 clientheight 時,scrollheight 的值是 clientheight,而 offsetheight 可以小於 clientheight。

ie、opera 認為 offsetheight 是可視區域 clientheight 滾動條加邊框。scrollheight 則是網頁內容實際高度。

同理

clientwidth、offsetwidth 和 scrollwidth 的解釋與上面相同,只是把高度換成寬度即可。

重要說明

以上是在沒有指定 doctype 的情況下,如果指定了 doctype,比如:dtd xhtml 1.0 transitional,則意義又會不同,在這種情況下這三個值都是同乙個值,都表示內容的實際高度。新版本的瀏覽器大多支援根據頁面指定的 doctype 來啟用不同的直譯器。如果要在指定的 doctype 下按上述意義來應用,怎麼辦呢?答案是:將 document.body 和 document.documentelement 一起應用,比如:document.documentelement.scrollleft || document.body.scrollleft(一般將 document.documentelement 寫在前面)

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...

JS獲取各種寬度 高度的簡單介紹

scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offsetheight 獲取物件相對於版面...

JS獲取各種寬度 高度的簡單介紹

js獲取各種寬度 高度的簡單介紹 scrollheight 獲取物件的滾動高度。scrollleft 設定或獲取位於物件左邊界和視窗中目前可見內容的最左端之間的距離 scrolltop 設定或獲取位於物件最頂端和視窗中可見內容的最頂端之間的距離 scrollwidth 獲取物件的滾動寬度 offse...