JS獲取瀏覽器窗口大小 獲取屏幕，瀏覽器，網(wǎng)頁高度寬度
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.clientWidth
網(wǎng)頁可見區(qū)域高：document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘篸ocument.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高：document.body.offsetHeight (包括邊線的寬)
網(wǎng)頁正文全文寬：document.body.scrollWidth
網(wǎng)頁正文全文高：document.body.scrollHeight
網(wǎng)頁被卷去的高：document.body.scrollTop
網(wǎng)頁被卷去的左：document.body.scrollLeft
網(wǎng)頁正文部分上：window.screenTop
網(wǎng)頁正文部分左：window.screenLeft
屏幕分辨率的高：window.screen.height
屏幕分辨率的寬：window.screen.width
屏幕可用工作區(qū)高度：window.screen.availHeight
屏幕可用工作區(qū)寬度：window.screen.availWidth
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置
event.clientX 相對文檔的水平座標(biāo)
event.clientY 相對文檔的垂直座標(biāo)
event.offsetX 相對容器的水平坐標(biāo)
event.offsetY 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量
IE，F(xiàn)ireFox 差異如下：
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均無關(guān))
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術(shù)要點
本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需
要深入Document內(nèi)部對body進(jìn)行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。
Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點。
document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。
實現(xiàn)代碼
<!------------------------------文件名：30.3.htm------------------------------>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"<html xmlns="<head>
<title>請調(diào)整瀏覽器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">請調(diào)整瀏覽器窗口大小</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">
<!--
var winWidth = 0;
?? var winHeight = 0;
?? function findDimensions() //函數(shù)：獲取尺寸
?? {
?? //獲取窗口寬度
?? if (window.innerWidth)
?? winWidth = window.innerWidth;
?? else if ((document.body) && (document.body.clientWidth))
?? winWidth = document.body.clientWidth;
?? //獲取窗口高度
?? if (window.innerHeight)
?? winHeight = window.innerHeight;
?? else if ((document.body) && (document.body.clientHeight))
?? winHeight = document.body.clientHeight;
?? //通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小
?? if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
?? {
?? winHeight = document.documentElement.clientHeight;
?? winWidth = document.documentElement.clientWidth;
?? }
?? //結(jié)果輸出至兩個文本框
?? document.form1.availHeight.value= winHeight;
?? document.form1.availWidth.value= winWidth;
?? }
?? findDimensions();
?? //調(diào)用函數(shù)，獲取數(shù)值
?? window.onresize=findDimensions;
//-->
</script>
</body>
</html>
|
源程序解讀
（1）程序首先建立一個表單，包含兩個文本框，用于顯示窗口當(dāng)前的寬度和高度，并且，其數(shù)值會隨窗口大小的改變而變化。
（2）在隨后的JavaScript代碼中，首先定義了兩個變量winWidth和winHeight，用于保存窗口的高度值和寬度值。
（3）然后，在函數(shù)findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和寬度，并將二者保存在前述兩個變量中。
（4）再通過深入Document內(nèi)部對body進(jìn)行檢測，獲取窗口大小，并存儲在前述兩個變量中。
（5）在函數(shù)的最后，通過按名稱訪問表單元素，結(jié)果輸出至兩個文本框。
（6）在JavaScript代碼的最后，通過調(diào)用findDimensions ( )函數(shù)，完成整個操作。
