JS 獲取瀏覽器和屏幕寬高信息（轉載）

時間 2019-11-12

原文原文鏈接

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 相對文檔的水平座標+垂直方向滾動的量javascript

IE，FireFox 差別以下：html

IE6.0、FF1.06+：java

clientWidth = width + padding瀏覽器

clientHeight = height + padding函數

offsetWidth = width + padding + borderpost

offsetHeight = height + padding + borderui

IE5.0/5.5：
clientWidth = width - borderurl

clientHeight = height - borderorm

offsetWidth = widthxml

offsetHeight = height

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

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

技術要點
本節代碼主要使用了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文檔所在窗口的當前寬度。

實現代碼 <!——————————文件名：30.3.htm——————————>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="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">
<!–
var winWidth = 0;
   var winHeight = 0;
   function findDimensions() //函數：獲取尺寸
   {
   //獲取窗口寬度
   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內部對body進行檢測，獲取窗口大小
   if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
   {
   winHeight = document.documentElement.clientHeight;
   winWidth = document.documentElement.clientWidth;
   }
   //結果輸出至兩個文本框
   document.form1.availHeight.value= winHeight;
   document.form1.availWidth.value= winWidth;
   }
   findDimensions();
   //調用函數，獲取數值
   window.onresize=findDimensions;
//–>
</script>
</body>
</html>