當前位置:編程學習大全網 - 腳本源碼 - clientWidth、offsetWidth、clientHeight、offsetHeight 高手詳細解釋!

clientWidth、offsetWidth、clientHeight、offsetHeight 高手詳細解釋!

四種瀏覽器對 clientHeight、offsetHeight、scrollHeight、clientWidth、offsetWidth 和 scrollWidth 的解釋差異

網頁可見區域寬:document.body.clientWidth

網頁可見區域高:document.body.clientHeight

網頁可見區域寬:document.body.offsetWidth (包括邊線的寬)

網頁可見區域高:document.body.offsetHeight (包括邊線的寬)

網頁正文全文寬:document.body.scrollWidth

網頁正文全文高:document.body.scrollHeight

網頁被卷去的高:document.body.scrollTop

網頁被卷去的左:document.body.scrollLeft

網頁正文部分上:window.screenTop

網頁正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的寬:window.screen.width

屏幕可用工作區高度:window.screen.availHeight

屏幕可用工作區寬度:window.screen.availWidth

這裏說說四種瀏覽器對 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解釋。

這四種瀏覽器分別為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 的解釋與上面相同,只是把高度換成寬度即可。

註:以上也是轉的,對自己有點參考而已,有些值要跟據頁面方式而定!我用的Ajax就完全沒法用上面的方法定高!

javaScript窗口屬性:

網頁可見區域寬:document.body.clientWidth

網頁可見區域高:document.body.clientHeight

網頁可見區域寬:document.body.offsetWidth (包括邊線的寬)

網頁可見區域高:document.body.offsetHeight (包括邊線的寬)

網頁正文全文寬:document.body.scrollWidth

網頁正文全文高:document.body.scrollHeight

網頁被卷去的高:document.body.scrollTop

網頁被卷去的左:document.body.scrollLeft

網頁正文部分上:window.screenTop

網頁正文部分左:window.screenLeft

屏幕分辨率的高:window.screen.height

屏幕分辨率的寬:window.screen.width

屏幕可用工作區高度:window.screen.availHeight

屏幕可用工作區寬度:window.screen.availWidth

在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 ==> 可見區域高度

註:在IE中“可見區域”基本不認可body,而必需使用documentElement!!!!

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

獲取窗口高寬:

var w= document.documentElement.offsetWidth;

var h=document.documentElement.offsetHeight;

  • 上一篇:適合霧天發朋友圈的句子
  • 下一篇:夢幻之星OL2新起源PSO2NGS雙機槍攻略雙槍連鎖終結方式
  • copyright 2024編程學習大全網