原文地址：http://blog.snsgou.com/post-574.html
IE中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
FireFox中：
document.body.clientWidth ==> BODY對象寬度
document.body.clientHeight ==> BODY對象高度
document.documentElement.clientWidth ==> 可見區域寬度
document.documentElement.clientHeight ==> 可見區域高度
Opera中：
document.body.clientWidth ==> 可見區域寬度
document.body.clientHeight ==> 可見區域高度
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
沒有定義W3C的標准，則
IE為：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬)
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
Opera為：
document.documentElement.clientWidth ==> 頁面對象寬度（即BODY對象寬度加上Margin寬）
document.documentElement.clientHeight ==> 頁面對象高度（即BODY對象高度加上Margin高）
網頁可見區域寬： 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
(注意：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
HTML精確定位：scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollWidth ==> 獲取對象的滾動寬度
scrollHeight ==> 獲取對象的滾動高度
scrollLeft ==> 設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離（ 被卷去的左）
scrollTop ==> 設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離（ 被卷去的高）
offsetLeft ==> 獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop ==> 獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
offsetHeight ==> 獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
event.clientX ==> 相對文檔的水平座標
event.clientY ==> 相對文檔的垂直座標
event.offsetX ==> 相對容器的水平坐標
event.offsetY ==> 相對容器的垂直坐標
document.documentElement.scrollTop ==> 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop ==> 相對文檔的水平座標+垂直方向滾動的量
實現代碼：
<!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"> </meta></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>
附 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=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <style type="text/css"> /* reset */ body, h1, h2, h3, p, dl, dt, dd, ul, ol, li, button, input, textarea, th, td{margin:0; padding:0;} body{font:12px/1.2 Arial, "宋體"; color:#333;vertical-align: middle;_background:url(about:blank) fixed;_height:100%;background:#FFF;} button, input, select, textarea, label{vertical-align:middle;} img{vertical-align:top; border:none;} ul, ol{list-style:none;} a{text-decoration:none; color:#474747; vertical-align:baseline; cursor:pointer;} a:hover{text-decoration:none; color:#f76f0e;} table{border-collapse:collapse; border-spacing:0;} b{font-weight: normal;} /* test */ body{border:10px solid #6F6;} .wrapper{width:800px;height:500px;border:1px solid #F00;margin:0 auto;} .div1{margin-top:50px;border:1px solid #CCC;padding:10px;margin-left:10px;} .div2{margin-top:70px;border:1px solid #00F;} </style> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> </script> </head> <body> <div class="wrapper" id="wrapper"> <div class="div1" id="div1"> div1,div1,div1,div1,div1,div1,div1,div1,div1, div1,div1,div1,div1,div1,div1,div1,div1,div1,div1 </div> <div class="div2" id="div2"> div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, <br/> div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, <br/> div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, <br/> div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, <br/> div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2,div2, </div> </div> </body> </html>
匯總
////////瀏覽器視口的高度
function windowHeight() {
var myHeight = 0;
if (typeof(window.innerHeight) == 'number') {
//Non-IE
myHeight = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientHeight)) {
//IE 6+ in 'standards compliant mode'
myHeight = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientHeight)) {
//IE 4 compatible
myHeight = document.body.clientHeight;
}
return myHeight;
}
/////////瀏覽器視口的寬度
function windowWidth() {
var myWidth = 0;
if (typeof(window.innerWidth) == 'number') {
//Non-IE
myWidth = window.innerWidth;
} else if (document.documentElement && (document.documentElement.clientWidth)) {
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
} else if (document.body && (document.body.clientWidth)) {
//IE 4 compatible
myWidth = document.body.clientWidth;
}
return myWidth;
}
/**** 瀏覽器垂直滾動位置 ****/
function scrollY() {
var de = document.documentElement;
return window.pageYOffset || (de && de.scrollTop) || document.body.scrollTop;
}
/**** 瀏覽器水平滾動位置 ****/
function scrollX() {
var de = document.documentElement;
return window.pageXOffset || (de && de.scrollLeft) || document.body.scrollLeft;
}
/**** 當前頁面高度 ****/
function pageHeight() {
return document.body.scrollHeight;
}
/**** 當前頁面寬度 ****/
function pageWidth() {
return document.body.scrollWidth;
}