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精确定位中，scrollHeight用于获取对象的滚动高度，scrollWidth用于获取对象的滚动宽度。scrollLeft设置或获取对象左边界与窗口中目前可见内容最左端之间的距离，scrollTop设置或获取对象最顶端与窗口中可见内容最顶端之间的距离。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。

offsetWidth仅等于width。

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

实现代码：

<!DOCTYPE html >
<html>
<head>
<title>请调整浏览器窗口</title>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
</head>
<body>
<h2 align="center">请调整浏览器窗口大小</h2>
<form action="#" method="get" name="form1" id="form1">
<!--显示浏览器窗口的实际尺寸-->
<p>浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"></p>
<p>浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"></p>
</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 ( )函数，完成整个操作。