當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

DOCTYPE声明对JS获取窗口宽度和高度的影响【转】

發布時間：2025/6/17 javascript 41 豆豆

生活随笔收集整理的這篇文章主要介紹了 DOCTYPE声明对JS获取窗口宽度和高度的影响【转】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

【摘注】：以下說法不準確，不是有沒有DOCTYPE聲明，而是不同的DOCTYPE聲明對js的處理有影響。

在沒有DOCTYPE聲明的情況下:

document.body.clientWidth

document.body.clientHeight

為當前窗口的寬度/高度;

在DOCTYPE聲明以后

document.body.clientWidth

document.body.clientHeight

為整個頁面的寬度/高度;

document.documentElement.clientWidth

document.documentElement.clientHeight

為當前窗口的寬度/高度;

同樣增加DOCTYPE聲明后

document.body.scrollLeft

document.body.scrollTop

要改為

document.documentElement.scrollLeft

document.documentElement.scrollTop

注意保存時，文件的編碼要看好，有時會出現腳本錯誤，是因為編碼的格式問題，如GB2312

------------------------------------------------------------------

在設計頁面時可能經常會用到固定層的位置，這就需要獲取一些html對象的坐標以更靈活的設置目標層的坐標，這里可能就會用到document.body.scrollTop等屬性，但是此屬性在xhtml標準網頁或者更簡單的說是帶<!DOCTYPE ..>標簽的頁面里得到的結果是0，如果不要此標簽則一切正常，那么在xhtml頁面怎么獲得body的坐標呢，當然有辦法-使用document.documentElement來取代document.body,可以這樣寫
例：
var top = document.documentElement.scrollTop || document.body.scrollTop;
在javascript里||是個好東西，除了能用在if等條件判斷里，還能用在變量賦值上。那么上例等同于下例。
例：
var top = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop;
這么寫可以得到很好的兼容性。

---------------------------------------------------
JS獲取瀏覽器窗口巨細獲取屏幕，瀏覽器，網頁高度寬度

網頁可見區域寬：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

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取東西的滾動高度。
scrollLeft:設置或獲取位于東西左界限和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位于東西最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取東西的滾動寬度
offsetHeight:獲取東西相對付版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取東西相對付版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取東西相對付版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的筆直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的筆直坐標
document.documentElement.scrollTop 筆直偏向滾動的值
event.clientX document.documentElement.scrollTop 相對文檔的水平座標筆直偏向滾動的量

IE，FireFox 差別如下：

IE6.0、FF1.06 ：

clientWidth = width padding

clientHeight = height padding

offsetWidth = width padding border

offsetHeight = height padding border

IE5.0/5.5：
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)

網頁可見區域寬： 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東西關于窗口的一些屬性，這些屬性的主要效用和用法如下。

要得到窗口的尺寸，對付差別的瀏覽器，需要使用差別的屬性和要領：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注重根元素的尺寸，而不是元素。

Window東西的innerWidth屬性包括當前窗口的內部寬度。Window東西的innerHeight屬性包括當前窗口的內部高度。

Document東西的body屬性對應HTML文檔的標簽。Document東西的documentElement屬性則體現HTML文檔的根節點。

document.body.clientHeight體現HTML文檔所在窗口確當前高度。document.body. clientWidth體現HTML文檔所在窗口確當前寬度。

實現源代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title>請調解瀏覽器窗口</title><meta http-equiv="content-type" content="text/html; charset=gb2312"></head><body><h2 align="center">請調解瀏覽器窗口巨細</h2><hr><form action="#" method="get" name="form1" id="form1">瀏覽器窗口的實際高度: <input type="text" name="availHeight" size="4"><br>瀏覽器窗口的實際寬度: <input type="text" name="availWidth" size="4"><br></form><script type="text/javascript"></script></body></html>
源程序解讀

（1）程序首先建立一個表單，包括兩個文本框，用于顯示窗口當前的寬度和高度，并且，其數值會隨窗口巨細的轉變而轉變。

（2）在隨后的JavaScript源代碼中，首先界說了兩個變量winWidth和winHeight，用于留存窗口的高度值和寬度值。

（3）然后，在函數findDimensions ( )中，使用windows.innerHeight和windows.innerWidth得到窗口的高度和寬度，并將二者留存在前述兩個變量中。

（4）再通過深入Document內部對body進行檢測，獲取窗口巨細，并存儲在前述兩個變量中。

（5）在函數的最后，通過按名稱訪問表單位素，結果輸出至兩個文本框。

（6）在JavaScript源代碼的最后，通過挪用findDimensions ( )函數，完成整個操縱。

?轉自：囧南風囧的博客

轉載于:https://www.cnblogs.com/NNUF/archive/2012/02/08/2342390.html

總結

以上是生活随笔為你收集整理的DOCTYPE声明对JS获取窗口宽度和高度的影响【转】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： int main(int argc,ch
下一篇： [轉]JavaScript获取HTML