JS 獲取浏覽器和屏幕寬高等信息的實現思路及代碼

本節代碼主要使用了Document對象關於窗口的一些屬性附實現代碼及源程序解決有需求的朋友可以參考下

　　網頁可見區域寬documentbodyclientWidth
網頁可見區域高documentbodyclientHeight
網頁可見區域寬documentbodyoffsetWidth (包括邊線的寬)
網頁可見區域高documentbodyoffsetHeight (包括邊線的寬)
網頁正文全文寬documentbodyscrollWidth
網頁正文全文高documentbodyscrollHeight
網頁被卷去的高documentbodyscrollTop
網頁被卷去的左documentbodyscrollLeft
網頁正文部分上windowscreenTop
網頁正文部分左windowscreenLeft
屏幕分辨率的高windowscreenheight
屏幕分辨率的寬windowscreenwidth
屏幕可用工作區高度windowscreenavailHeight
屏幕可用工作區寬度windowscreenavailWidth
HTML精確定位:scrollLeftscrollWidthclientWidthoffsetWidth
scrollHeight: 獲取對象的滾動高度
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
eventclientX 相對文檔的水平座標
eventclientY 相對文檔的垂直座標
eventoffsetX 相對容器的水平坐標
eventoffsetY 相對容器的垂直坐標
documentdocumentElementscrollTop 垂直方向滾動的值
eventclientX+documentdocumentElementscrollTop 相對文檔的水平座標+垂直方向滾動的量

IEFireFox 差異如下

IEFF+

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE/
clientWidth = width border

clientHeight = height border

offsetWidth = width

offsetHeight = height

(需要提一下CSS中的margin屬性與clientWidthoffsetWidthclientHeightoffsetHeight均無關)

－－－－－－－－－－－－－－－－－－－

技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性這些屬性的主要功能和用法如下

要得到窗口的尺寸對於不同的浏覽器需要使用不同的屬性和方法若要檢測窗口的真實尺寸在Netscape下需要使用Window的屬性在IE下需要深入Document內部對body進行檢測在DOM環境下若要得到窗口的尺寸需要注意根元素的尺寸而不是元素

Window對象的innerWidth屬性包含當前窗口的內部寬度Window對象的innerHeight屬性包含當前窗口的內部高度

Document對象的body屬性對應HTML文檔的標簽Document對象的documentElement屬性則表示HTML文檔的根節點

documentbodyclientHeight表示HTML文檔所在窗口的當前高度documentbody clientWidth表示HTML文檔所在窗口的當前寬度

實現代碼 <!——————————文件名htm——————————>

復制代碼代碼如下:
<!DOCTYPE html PUBLIC "//WC//DTD XHTML Transitional//EN"
"
<html xmlns="
<head>
<title>請調整浏覽器窗口</title>
<meta httpequiv="contenttype" content="text/html; charset=gb">
</head>
<body>
<h align="center">請調整浏覽器窗口大小</h><hr>
<form action="#" method="get" name="form" id="form">
<!–顯示浏覽器窗口的實際尺寸–>
浏覽器窗口的實際高度: <input type="text" name="availHeight" size=""><br>
浏覽器窗口的實際寬度: <input type="text" name="availWidth" size=""><br>
</form>
<script type="text/javascript">
<!–
var winWidth = ;
var winHeight = ;
function findDimensions() //函數獲取尺寸
{
//獲取窗口寬度
if (windowinnerWidth)
winWidth = windowinnerWidth;
else if ((documentbody) && (documentbodyclientWidth))
winWidth = documentbodyclientWidth;
//獲取窗口高度
if (windowinnerHeight)
winHeight = windowinnerHeight;
else if ((documentbody) && (documentbodyclientHeight))
winHeight = documentbodyclientHeight;
//通過深入Document內部對body進行檢測獲取窗口大小
if (documentdocumentElement && documentdocumentElementclientHeight && documentdocumentElementclientWidth)
{
winHeight = documentdocumentElementclientHeight;
winWidth = documentdocumentElementclientWidth;
}
//結果輸出至兩個文本框
documentformavailHeightvalue= winHeight;
documentformavailWidthvalue= winWidth;
}
findDimensions();
//調用函數獲取數值
windowonresize=findDimensions;
//–>
</script>
</body>
</html>

　　
源程序解讀

（）程序首先建立一個表單包含兩個文本框用於顯示窗口當前的寬度和高度並且其數值會隨窗口大小的改變而變化

（）在隨後的JavaScript代碼中首先定義了兩個變量winWidth和winHeight用於保存窗口的高度值和寬度值

（）然後在函數findDimensions ( )中使用windowinnerHeight和windowinnerWidth得到窗口的高度和寬度並將二者保存在前述兩個變量中

（）再通過深入Document內部對body進行檢測獲取窗口大小並存儲在前述兩個變量中

（）在函數的最後通過按名稱訪問表單元素結果輸出至兩個文本框

（）在JavaScript代碼的最後通過調用findDimensions ( )函數完成整個操作

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20376.html