js獲取頁面高度寬度

2021-04-18 03:31:25 字數 1618 閱讀 1534

關於獲取各種瀏覽器可見視窗大小的一點點研究。

在我本地測試當中:在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的標準在作怪啊http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

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

在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高)

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

js獲取高度和寬度

createtime 2017年7月24日10 15 47 author marydon js獲取高度和寬度 參考連線 實現方式 style.height offsetheight,style.width offsetwidth 第一種情況 寬高都寫在樣式表裡,就比如 div1。獲取id div1 ...

js獲取頁面高度

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

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

紅色是大塊的邊框,藍色是小塊的邊框,藍框外白色區域是大塊的 padding 或 和 小塊的 margin 或其他元素或其他原因造成的空白。obj.offsettop 指 obj 相對於版面或由 offsetparent 屬性指定的父座標的計算上側位置,整型,單位畫素 obj.offsetleft 指...