10.3　确定页面元素的大小和位置

当你使用JavaScript和jQuery来添加或更改一个Web页面的时候，知道页面上的元素的大小和位置，往往是很方便的。例如，你可能想要将非常常见的覆盖放到页面的顶部（这种效果使得页面显得暗淡，如7.5节的FancyBox教程所示）。要做到这些，我们放置一个绝对定位的＜div＞标签，以便它覆盖住浏览器窗口。要完全覆盖窗口，你需要确保div和窗口具有相同的大小，因此，你必须首先确定浏览器窗口的宽度和高度。

同样，如果想要创建一个工具提示效果（也就是当访问者鼠标光标移动到页面上的某个位置的时候，弹出一个带有信息的小对话框），我们需要确定屏幕上鼠标光标的位置，以便可以放置该工具提示。

10.3.1　确定元素的高度和宽度

jQuery提供了.height（）和.width（）函数来得到页面元素的高度和宽度。通过提供合适的选择器，你可以确定页面上任何标签的高度和宽度，甚至确定浏览器窗口的大小，以及文档自身的大小。

·浏览器窗口的高度和宽度。如果你想要获取浏览器窗口的高度和宽度（通常称之为视口），使用$（window）选择器和height（）和width（）函数，如下所示：

var winH=$（window）.height（）；

var winW=$（window）.width（）；

上面的代码获取了宽度和高度，并且将其存储到两个变量中。当你想要确保没有将一个元素放置在浏览器窗口的可见区域之外的时候，获取浏览器窗口的宽度和高度是很有用的。

·文档的高度和宽度。文档和浏览器窗口并不是同样的东西，并且，大多数时候，二者的高度和宽度是不同的。文档表示你的Web页面，如果页面只有一点内容，例如，一个段落，那么，文档的高度就是这个段落（加上顶端和底部的边距）。在较大的显示器上，文档的高度可能小于浏览器窗口的高度。相反，如果一个Web页面有很多内容，以致访问者必须滚动页面来读取所有内容，那么，文档比浏览器窗口还要高。同样，如果你已经为一个body标签或者包含了内容页面的一个＜div＞标签设置了一个样式，并且，假设将该样式的宽度设置为1500像素，文档可能比浏览器窗口要宽。要获取文档的宽度和高度，使用$（document）选择器和height（）和width（）函数：

var docH=$（document）.height（）；

var docW=$（document）.width（）；

也可以在段落、div和图像这样的常规HTML元素上使用height（）和width（）函数，然而，这并不总是能给出你想要的信息。height（）和width（）函数返回CSS的height和width属性的值，这并不一定与页面上的元素的高度和宽度相同。在CSS中，width和height属性定义了一个标签中留给内容的空间，例如，一个段落标签中的文本。然而，如果你给该元素添加了补白、边框或者边距，那么，该元素占据页面的空间要大于该元素的CSS的高度和宽度。

要理解这是如何工作的，我们来看用于一个＜div＞标签的一些简单的CSS：

div{

width：300px；

height：300px；

padding：20px；

border：10px solid black；

}

图10-6显示了该div。该div在实际屏幕上的宽度和高度是360像素，因为它在页面上的空间是高度（或宽度）、补白和边框的总和。因此，实际的宽度是左边框+左补白+CSS宽度+右补白+右边框，并且，实际的高度是上边框+上补白+CSS高度+下补白+下边框。

由于存在这些不同的大小，jQuery提供了3组函数来确定页面元素的不同宽度和高度：

·width（）和height（）函数返回该元素的CSS宽度和高度。例如，假设你的页面有上面列出的CSS样式，并且其上面有一个＜div＞标签：

var divW=$（'div'）.width（）；//300

var divH=$（'div'）.height（）；//300

在上面的代码中，变量divW和divH保存了值300，即CSS中设置的高度和宽度。

·innerWidth（）返回了宽度+左补白和右补白，innerHeight（）返回CSS高度+上补白和下补白：

var divW=$（'div'）.innerWidth（）；//340

var divH=$（'div'）.innerHeight（）；//340

在上面的代码中，变量divW和divH保存了值340，即CSS中设置的高度和宽度加上两边的补白值。

·outerWidth（）返回了宽度+左补白和右补白+左边框和右边框；outerHeight（）返回了CSS高度+上补白和下补白+上边框和下边框：

var divW=$（'div'）.outerWidth（）；//360

var divH=$（'div'）.outerHeight（）；//360

在上面的代码中，变量divW和divH保存了值360，即CSS中设置的高度和宽度+两边的补白和边框值。

outerWidth（）和outerHeight（）属性也接收一个可选的参数：true，它还会将元素周围的边距考虑进去。例如，假设div标签的CSS如下所示：

div{

width：300px；

height：300px；

padding：20px；

border：10px solid black；

margin：20px；

}

注意20像素的边距设置。如果你还想要将边距包含到整体的宽度和高度计算中，可以编写如下所示的jQuery代码：

var divW=$（'div'）. outerWidth（true）；//400

var divH=$（'div'）. outerHeight（true）；//400

根据想要完成的事情不同可以选择不同的函数。例如，可能你想要用一个黑色的框覆盖页面上的一些文本（例如，测试题的答案），随后才显示这些文本。一种可能的方法是，使用填充了黑色背景色的一个div来覆盖该文本。在这个例子中，你将使用width（）和height（）函数来确定只是文本的宽度和高度（不包括补白或边框），以便在div覆盖文本之前正确地确定其大小。

或者，假设你想要创建一个类似Pong的游戏，一个小球在屏幕上来回弹跳，并且想要这个球保持在游戏区域的边框之内（一个div可能四周带有一条边框线）。那么，你需要知道边框中可用的区域，以便确保动画的球不会跳到框外或者压着边框。在这个例子中，可以使用innerHeight（）和innerWidth（），因为球可能会移动到框中的任何位置，甚至超过应用于框的任何补白。

注意：不要使用窗口对象（$（'window'））或文档对象（$（document））的innerHeight（）、innerWidth（）、outerHeight（）或outerWidth（）。只有height（）和width（）才对这些对象有效。

图　10-6　当提到CSS的时候，宽度和高度并不总是很直接的。CSS的width和height属性只是指定了用于标签中的内容的空间。页面上的一个元素的整体高度和宽度，是通过将width和height和元素上的任何补白和边框组合起来计算的