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 相对文档的水平座标+垂直方向滚动的量

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文档所在窗口的当前宽度。

实现代码?[Copy to clipboard]Download 52004.txt

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）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

//页面位置及窗口大小

function GetPageSize() { 

var scrW, scrH;  

if(window.innerHeight && window.scrollMaxY)  {    // Mozilla     

scrW = window.innerWidth + window.scrollMaxX;    

scrH = window.innerHeight + window.scrollMaxY;  

}  

else if(document.body.scrollHeight > document.body.offsetHeight) {    // all but IE Mac     

scrW = document.body.scrollWidth;     

scrH = document.body.scrollHeight;  

} else if(document.body)  { // IE Mac     

scrW = document.body.offsetWidth;     

scrH = document.body.offsetHeight; 

}  

var winW, winH;  

if(window.innerHeight)  { // all except IE     

winW = window.innerWidth;  

winH = window.innerHeight;  

} else if (document.documentElement && document.documentElement.clientHeight) {    // IE 6 Strict Mode     

winW = document.documentElement.clientWidth;      

winH = document.documentElement.clientHeight;  

} else if (document.body) { // other     

winW = document.body.clientWidth;     

winH = document.body.clientHeight;  

}    // for small pages with total size less then the viewport  

var pageW = (scrW<winW) ? winW : scrW;  

var pageH = (scrH<winH) ? winH : scrH;     

return {PageW:pageW, PageH:pageH, WinW:winW, WinH:winH}; 

}; 

//滚动条位置

function GetPageScroll()  {  

var x, y; if(window.pageYOffset)  {    // all except IE     

y = window.pageYOffset;     

x = window.pageXOffset;  

} else if(document.documentElement && document.documentElement.scrollTop)  {    // IE 6 Strict     

y = document.documentElement.scrollTop;     

x = document.documentElement.scrollLeft;  

} else if(document.body) {    // all other IE 

y = document.body.scrollTop;     

x = document.body.scrollLeft;    

}  

return {X:x, Y:y}; 

} 

jquery

获取浏览器显示区域的高度：$(window).height();  

获取浏览器显示区域的宽度：$(window).width();  

获取页面的文档高度：$(document).height();  

获取页面的文档宽度：$(document).width(); 

获取滚动条到顶部的垂直高度：$(document).scrollTop();  

获取滚动条到左边的垂直宽度：$(document).scrollLeft();  

计算元素位置和偏移量offset方法是一个很有用的方法，它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。offset(options, results)  options.relativeTo 指定相对计算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。options.scroll 是否把滚动条计算在内，默认TRUE  

options.padding 是否把padding计算在内，默认false  options.margin  是否把margin计算在内，默认true  options.border 是否把边框计算在内，默认true  

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。