網頁可見區域寬：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">
<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>
原始程式解讀
（1）程式首先建立一個表單，包含兩個文字框，用於顯示視窗目前的寬度和高度，並且，其數值會隨視窗大小的改變而變化。
（2）在隨後的JavaScript程式碼中，首先定義了兩個變數winWidth和winHeight，用於保存視窗的高度值和寬度值。
（3）然後，在函數findDimensions ( )中，使用window.innerHeight和window.innerWidth得到視窗的高度和寬度，並將二者保存在前述兩個變數中。
（4）再透過深入Document內部對body進行偵測，取得視窗大小，並儲存在前述兩個變數中。
（5）在函數的最後，透過按名稱存取表單元素，結果輸出至兩個文字方塊。
（6）在JavaScript程式碼的最後，透過呼叫findDimensions ( )函數，完成整個操作。