JavaScript获取DOM元素位置与尺寸详解

引言

在构建复杂的网页时，经常需要使用JavaScript来实现DOM元素的动态交互效果。此时，准确计算元素的位置和尺寸变得至关重要，同时必须考虑不同浏览器的兼容性问题。为了编写出符合预期的JavaScript代码，掌握相关基础知识是必要的。

基础概念

基础概念

为了更清晰地理解，我们需要了解几个核心基础概念。每个HTML元素都具备以下关键属性：

理解这些属性的关键在于认识到，HTML元素的实际内容尺寸可能大于分配给它的容器盒子，从而导致滚动条的出现。内容区域即为视口，当实际内容超出视口范围时，必须将元素的滚动条位置纳入计算考量。

1. clientHeight和clientWidth用于描述元素的内部尺寸，具体指元素内容加上内边距（padding）的大小。它不包括边框（在IE浏览器中实际包含边框）、外边距（margin）以及滚动条部分。

2. offsetHeight和offsetWidth用于描述元素的外部尺寸，具体指元素内容加上内边距（padding）再加上边框（border）的大小。它不包括外边距（margin）和滚动条部分。

3. clientTop和clientLeft返回的是内边距边缘与边框外边缘之间的水平和垂直距离，实际上就是元素左边框和上边框的宽度。

4. offsetTop和offsetLeft表示该元素左上角（边框的外边缘）与已定位的父容器（即offsetParent对象）左上角之间的距离。

5. offsetParent对象指的是距离该元素最近的已定位（relative或absolute）祖先元素。通过递归向上查找，如果没有找到已定位的祖先元素，则返回null。

为了便于理解，下面提供一个简单的示例。

<div id="divParent" style="padding: 8px; background-color: #aaa; position: relative;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 200px; width: 200px; border: solid 3px #f00;">
</div>
</div>

<script type="text/javascript">
var div = document.getElementById('divDisplay');
var clientHeight = div.clientHeight;
 var clientWidth = div.clientWidth;
 div.innerHTML += 'clientHeight: ' + clientHeight + '<br/>';
 div.innerHTML += 'clientWidth: ' + clientWidth + '<br/>';
var clientLeft = div.clientLeft;
 var clientTop = div.clientTop;
 div.innerHTML += 'clientLeft: ' + clientLeft + '<br/>';
 div.innerHTML += 'clientTop: ' + clientTop + '<br/>';
var offsetHeight = div.offsetHeight;
 var offsetWidth = div.offsetWidth;
 div.innerHTML += 'offsetHeight: ' + offsetHeight + '<br/>';
 div.innerHTML += 'offsetWidth: ' + offsetWidth + '<br/>';
var offsetLeft = div.offsetLeft;
 var offsetTop = div.offsetTop;
 div.innerHTML += 'offsetLeft: ' + offsetLeft + '<br/>';
 div.innerHTML += 'offsetTop: ' + offsetTop + '<br/>';
var offsetParent = div.offsetParent;
 div.innerHTML += 'offsetParent: ' + offsetParent.id + '<br/>';
 </script>

运行效果如图所示

从图中可以看出，clientHeight等于div的高度加上上下各10px的padding值，clientWidth同理。

而clientLeft和clientTop的值即为div左边框和上边框的宽度。

offsetHeight等于clientHeight加上上下各3px的边框宽度之和，offsetWidth同理。

offsetTop等于div的30px margin加上offsetParent的8px padding，offsetLeft同理。

6. scrollWidth和scrollHeight表示元素的内容区域加上内边距，再加上溢出部分的尺寸。当内容恰好与内容区域匹配且没有溢出时，这些属性的值与clientWidth和clientHeight相等。

7. scrollLeft和scrollTop指的是元素滚动条的位置，这两个属性是可写的。

下面通过一个简单示例来进一步理解。

<div id="divParent" style="background-color: #aaa; padding:8px; border:solid 7px #000; height:200px; width:500px; overflow:auto;">
<div id="divDisplay" style="background-color: #0f0; margin: 30px; padding: 10px;
height: 400px; width: 200px; border: solid 3px #f00;
</div>
</div>

<script type="text/javascript">
var divP = document.getElementById('divParent');
var divD = document.getElementById('divDisplay');
var scrollHeight = divP.scrollHeight;
 var scrollWidth = divP.scrollWidth;
 divD.innerHTML += 'scrollHeight: ' + scrollHeight + '<br/>';
 divD.innerHTML += 'scrollWidth: ' + scrollWidth + '<br/>';
 </script>

在FireFox和IE10（IE10以下版本的盒模型与W3C标准不一致，此处不作讨论，兼容性问题将在下文介绍）下得到的结果是scrollHeight: 494，而在Chrome和Safari下得到的结果是scrollHeight: 502，两者相差8px。根据这个差值可以推测，这可能与divParent的padding有关，我们来验证一下。

我们可以分析它们的结果构成。首先，scrollHeight肯定包含了divDisplay所需的高度，即400px的高度加上上下各10px的padding，再加上上下各3px的border，以及上下各30px的margin。这样计算：

400 + 10*2 + 3*2 + 30*2 = 486

这样486 + 8 = 494，而486 + 8*2 = 502。果然如此，在FireFox和IE10下没有计算下padding。

掌握了这些基础知识后，我们就可以开始计算元素的位置和尺寸了。

相对于文档与视口的坐标

相对于文档与视口的坐标

当我们需要计算一个DOM元素的位置（即坐标）时，会涉及到两种坐标系：文档坐标和视口坐标。

我们常用的document指的是整个页面部分，而不仅仅是窗口可见部分，还包括因窗口大小限制而出现滚动条的部分，其左上角即为相对于文档坐标的原点。

视口是显示文档内容的浏览器区域，它不包括浏览器外壳（如菜单、工具栏、状态栏等），也就是当前窗口显示页面的部分，不包括滚动条。

如果文档比视口小，说明没有出现滚动，此时文档左上角和视口左上角重合。一般来讲，在两种坐标系之间进行切换，需要加上或减去滚动的偏移量（scroll offset）。

为了在坐标系之间进行转换，我们需要判定浏览器窗口的滚动条位置。window对象的pageXoffset和pageYoffset可以提供这些值，但IE 8及更早版本除外。也可以通过scrollLeft和scrollTop属性获得滚动条位置，正常情况下通过查询文档根节点（document.documentElement）来获得这些属性值，但在怪异模式下必须通过文档的body上查询。

function getScrollOffsets(w) {
var w = w || window;
if (w.pageXoffset != null) {
return { x: w.pageXoffset, y: pageYoffset };
            }
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { x: d.documentElement.scrollLeft, y: d.documentElement.scrollTop };
return { x: d.body.scrollLeft, y: d.body.scrollTop };
        }

有时候判断视口的尺寸也是非常有用的。

function getViewPortSize(w) {
var w = w || window;
if (w.innerWidth != null)
return { w: w.innerWidth, h: w.innerHeight };
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight };
return { w: d.body.clientWidth, h: d.body.clientHeight };
        }

任何HTML元素都拥有offsetLeft和offsetTop属性，用于返回元素的X和Y坐标。对于许多元素，这些值是文档坐标，但对于以定位元素后代及一些其他元素（如表格单元），返回的是相对于祖先元素的坐标。我们可以通过简单的递归上溯累加来计算。

function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x += e.offsetLeft;
y += e, offsetTop;
e = e.offsetParent;
            }
return { x: x, y: y };
        }

尽管如此，这个函数并不总是能计算出正确的值。当文档中含有滚动条时，这个方法就不能正常工作了。我们只能在没有滚动条的情况下使用这个方法，不过我们可以利用这个原理来计算一些元素相对于某个父元素的坐标。

视口坐标

视口坐标

计算视口坐标相对简单得多，可以通过调用元素的getBoundingClientRect方法。该方法返回一个包含left、right、top、bottom属性的对象，分别表示元素四个位置相对于视口的坐标。getBoundingClientRect所返回的坐标包含元素的内边距和边框，不包含外边距。其兼容性很好，非常实用。

元素尺寸

元素尺寸

由上述计算坐标的方法，我们可以方便地得出元素尺寸。在符合W3C标准的浏览器中，getBoundingClientRect返回的对象还包括width和height属性，但在原始IE中未实现。不过，通过返回对象的right-left和bottom-top可以方便地计算出尺寸。