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. 客户区大小

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

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

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

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

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

不过值得注意的是,这两种方法是存在差异的,当 html 元素没有充满整个浏览器视口的时候,使用偏移量的方法会返回 html 的实际高度和宽度,而 clientWidthclientHeight 会返回当前浏览器的可见区域大小,所以说对于 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. 关于位置


  • clientXclientY 是相对于视口的位置。

  • pageXpageY 在没有滚动的情况下和 clientX, clientY 是相等的,如果包含滚动的话, pageX = clientX + scrollLeft , pageY = clientY + scrollTop

  • screenXscreenY 就不是相对于浏览器视口的位置了,而是相对于用户的整个计算机屏幕。

坚持原创技术分享,您的支持将鼓励我继续创作!