JavaScript 获取浏览器窗口与屏幕尺寸及坐标详解

浏览器窗口与屏幕尺寸属性列表

获取网页可见区域宽度：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：获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算顶端位置。

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均无关）

JavaScript获取窗口尺寸实现方案

技术要点

本节代码主要使用了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>

代码逻辑详细解读

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

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