js 獲取網頁高度等資訊

2021-06-21 23:41:25 字數 2202 閱讀 9493

在我本地測試當中:

在ie、firefox、opera下都可以使用

document.body.clientwidth

document.body.clientheight

即可獲得,很簡單,很方便。

而在公司專案當中:

opera仍然使用

document.body.clientwidth

document.body.clientheight

可是ie和firefox則使用

document.documentelement.clientwidth

document.documentelement.clientheight

原來是w3c的標準在作怪啊

如果在頁面中新增這行標記的話

在ie中:

document.body.clientwidth ==> body物件寬度

document.body.clientheight ==> body物件高度

document.documentelement.clientwidth ==> 可見區域寬度

document.documentelement.clientheight ==> 可見區域高度

在firefox中:

document.body.clientwidth ==> body物件寬度

document.body.clientheight ==> body物件高度

document.documentelement.clientwidth ==> 可見區域寬度

document.documentelement.clientheight ==> 可見區域高度

? 在opera中:

document.body.clientwidth ==> 可見區域寬度

document.body.clientheight ==> 可見區域高度

document.documentelement.clientwidth ==> 頁面物件寬度(即body物件寬度加上margin寬)

document.documentelement.clientheight ==> 頁面物件高度(即body物件高度加上margin高)

而如果沒有定義w3c的標準,則

ie為:

document.documentelement.clientwidth ==> 0

document.documentelement.clientheight ==> 0

firefox為:

document.documentelement.clientwidth ==> 頁面物件寬度(即body物件寬度加上margin寬)document.documentelement.clientheight ==> 頁面物件高度(即body物件高度加上margin高)

opera為:

document.documentelement.clientwidth ==> 頁面物件寬度(即body物件寬度加上margin寬)document.documentelement.clientheight ==> 頁面物件高度(即body物件高度加上margin高)

真是一件麻煩事情,其實就開發來看,寧可少一些物件和方法,不使用最新的標準要方便許多啊。

有時候需要取頁面的底部, 就會用到document.body.clientheight , 在html 標準中(這一句就能取到整個頁面的高度, 不論body 的實際內容到底有多高, 例如, 1074*768 的解析度, 頁面最大化時, 這個高度約為720 , 即使頁面上只有一句」hello world」 , 也仍然取到720.

可是在xhtml中, 如果body 體中只有一行, 則document.body.clientheight 只能取到那一行的高度, 約20px, 這時如何還想取到整個頁面的高度, 就要用document.documentelement.clientheight 來獲取了.

原因是: 在html 中, body 是整個dom 的根, 而在xhtml 中, document 才是根, body 不再是根, 所以取body 的屬性時, 不能再取到整個頁面的值.

區別新舊標準的行是:

「>

前者指明該頁面使用舊標準, 後者指明該頁面使用新標準.

總結:xhtml中用 document.documentelement.clientheight 代替

document.body.clientheight

js獲取網頁高度

在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight 即可獲得,很簡單,很方便。而在公司專案當中 opera仍然使用 document.body.clientwidth docume...

js獲取網頁高度

在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight 即可獲得,很簡單,很方便。而在公司專案當中 opera仍然使用 document.body.clientwidth docume...

js獲取網頁高度

在我本地測試當中 在ie firefox opera下都可以使用 document.body.clientwidth document.body.clientheight 即可獲得,很簡單,很方便。而在公司專案當中 opera仍然使用 document.body.clientwidth docume...