JavaScript -- 元素大小和位置

在 JavaScript 操作 DOM 的过程中我们可能需要经常获取一个元素的大小，在处理鼠标事件的时候可能需要知道当前鼠标的点击位置，所以我将我在开发过程中使用的一些相关属性记录下来。

1. 偏移量

如果我们想知道一个元素相对于其父元素的偏移量，可以用以下几个属性获取到我们想要的数值。

• offsetHeight： 元素在垂直方向上占用的空间大小，包括元素内容的高度，内边距的高度以及边框的高度。
• offsetWidth： 元素在水平方向上占用的空间大小，包括元素的宽度，内边距的宽度以及边框的宽度。
• offsetLeft： 元素的左外边框到父元素的左内边框的距离。
• offsetTop: 元素的上外边框到父元素的上内边框的距离。
• offsetParent： 当前元素的父元素。

如果想计算出一个元素相对于整个页面的偏移量，那我们可以使用 offsetParent 协助完成，比如获取一个元素相对于页面的 offsetLeft。

    function getLeft(element) {
        var left = element.offsetLeft;
        var current = element.offsetParent;

        while(current !== null) {
            left += current.offsetLeft;
            current = current.offsetParent;
        }

        return left;
    }

当然，如果想获取一个元素相对于整个页面的 offsetTop，也可以使用同样的方式。

2. 客户区大小

有的时候我们想要知道用户的浏览器到底有多宽，有多高，这就需要借助于 clientWidth 和 clientHeight 了。clientWidth 返回的是元素的内容宽度与内边距宽度相加之和，clientHeight 返回的是元素的的内容高度与内边距高度相加之和。

可见，相比于上面介绍的 offsetWidth 和 offsetHeight，clientHeight 和 clientWidth 省略了边框的宽度。所以其实我们可以通过这两种方式计算用户的浏览器视口大小。

    function getViewPort() {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        };
    }

当然，我们也可以使用另一种方式

    function getViewPort() {
        return {
            width: document.documentElement.offsetWidth,
            height: document.documentElement.offsetHeight
        };
    }

不过值得注意的是，这两种方法是存在差异的，当 html 元素没有充满整个浏览器视口的时候，使用偏移量的方法会返回 html 的实际高度和宽度，而 clientWidth 和 clientHeight 会返回当前浏览器的可见区域大小，所以说对于 html 未充满屏幕的时候，我们想达到计算浏览器视口大小的功能，也可以添加如下 CSS 代码。

    html, body {
        height: 100%;
    }

3. 滚动大小

当实现瀑布流的时候可能会用到滚动属性，因为我们的数据不是一次性就加载完毕的，而是随着用户的滚动而动态的加载数据。下面是四个与滚动大小有关的属性。

• scrollHeight: 如果在没有滚动条的情况下，该属性和 clientHeight 返回值相同，即内容的高度与内边距的高度之和，不包含边框高度。如果存在滚动条，该属性等于 scrollTop + clientHeight
• scrollWidth: 计算方式和 scrollHeight 相同。
• scrollTop： 被隐藏在内容区域上方的像素数，通过这个属性可以设置元素的滚动位置。说直白点这个属性的值就是元素的总高度 - 元素的内容宽度 - 元素的 padding。
• scrollLeft: 被隐藏在内容区域左方的像素数，通过这个属性可以设置元素的滚动位置。

不过值得注意的是, 如果我们想取得当前页面的滚动位置时，在 Opera, Chrome 都可以通过 document.body.scrollTop 来获取，但是这个方法在 Firefox 需要通过 document.documentElement.scrollTop 来获取。所以我们可以投机取巧的采用以下方法获取当前浏览器的滚动位置。

    function getScrollTop() {
        var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
        return scrollTop;
    }

4. 关于位置

• clientX 和 clientY 是相对于视口的位置。
• pageX 和 pageY 在没有滚动的情况下和 clientX， clientY 是相等的，如果包含滚动的话， pageX = clientX + scrollLeft , pageY = clientY + scrollTop。
• screenX 和 screenY 就不是相对于浏览器视口的位置了，而是相对于用户的整个计算机屏幕。