offsetHeight在不同的瀏覽器下取值不同

2022-08-11 15:27:18 字數 1203 閱讀 3520

今天在調js的時候,發現firefox和ie在取document.body.offsetheight的值的時候結果不一樣。上網查了一下,發現如下結果:

這四種瀏覽器分別為ie(internet explorer)、ns(netscape)、opera、ff(firefox)。

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

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

但是

ff 在不同的 doctype 中對 clientheight

的解釋不同, xhtml 1 trasitional

中則不是如上解釋的。其它瀏覽器則不存在此問題。

offsetHeight在OnLoad中為0的現象

在使用ie中,特別在目前div css的方式,往往不定義div的高度,這是在新增div內容後,需要獲取div的高度時,往往需要用到offsetheight。在使用中,有時會碰到offsetheight獲取到為0的現象,但如果你用各種js除錯工具除錯,又能在物件中看到值 如果直接指向offsethei...

網頁尺寸offsetHeight

offsetheight和offsetwidth,獲取網頁內容寬度和高度 包括滾動條等邊線,會隨視窗的顯示大小改變 一。值offsetheight clientheight 滾動條 邊框。二。瀏覽器相容性 var w document.documentelement.offsetwidth docu...

offsetHeight在FF和IE6中的差異?

先看看簡單的 這是一行高度 div body html 1.在火狐3裡面,的到的是16px,解釋下,div裡面套著文字,實際中這樣考慮,產生乙個匿名盒子裡面放置文字 這是一行高度 由於行高為14px 那麼這個匿名盒子高度為14px 所以最終的 offsetheight 14px 1px 2 邊框 1...