网站首页 > 基础教程正文

图解几何尺寸相关的 JavaScript 属性和方法

ccvgpt 2024-11-10 08:43:33 基础教程 8 ℃

JavaScript 中元素的位置和尺寸使用矩形表示，具体类型是 DOMRect。它的常见属性在下图中用红色标注。

如果想获取某个元素所占最小矩形，使用 Element.getBoundingClientRect() 方法。它的返回值是 DOMRect 类型，其中的位置以视图（viewport）左上角为基准，尺寸不仅包括元素自身宽高，还包括内边距 padding 和边框宽度 border-width。

如果你想知道文档在垂直方向上滚动了多少距离，使用 window.scrollY 只读属性获取。window.pageYOffset 是 scrollY 的别名，常用于早期浏览器中。

如果 window.scrollY 的值是 100，说明文档向下滚动了 100 像素。如果是 0，说明没有滚动。

注意，scrollY 是只读属性，如果想让页面滚动到某一位置，给它赋值没用。此时需要使用 window.scroll()、window.scrollBy() 等方法设置，比如：

对应的，获取水平方向页面滚动距离的只读属性是 window.scrollX。

获取视图尺寸使用 window.innerWidth 和 window.innerHeight。这两个只读属性包括滚动条宽度，但不包括浏览器外边框的宽度。

获取整个浏览器尺寸（包括地址栏、关闭按钮等控件），使用 window.outerWidth 和 window.outerHeight 只读属性。

HTMLElement.offsetWidth 只读属性返回的是元素的布局宽度（layout width），它是一个整数，包括 padding, border-width 和垂直滚动条宽度（如果有的话）。offsetHeight 是布局高度。

默认情况下，元素的 offsetWidth / offsetHeight 和 getBoundingClientRect() 返回的尺寸大致相同，只不过前者是整数，后者是浮点数。

当元素经过 transform 形变，offsetWidth / offsetHeight 的值不受影响，依然和原始尺寸相同，但 getBoundingClientRect() 的返回值会变得不一样，它的值反应了元素占据的可视矩形。

如果想获取元素内容的尺寸，使用 Element.scrollWidth 和 Element.scrollHeight。它的值不含边框、滚动条宽度。注意，这里的内容包含滚动溢出的不可见的部分。

另外，它还包含 ::before、::after 等伪元素（pseudo-elements）的尺寸。

使用 Element.scrollTop 可以获取内容距离容器上边缘的距离。它是一个可读写属性。

最后，Element.clientWidth 和 Element.clientHeight 也能获取内容的尺寸。当元素没有滚动条时，它们的值和 Element.scrollWidth 和 Element.scrollHeight 相同，它们都不包含边框和滚动条的宽度。

<html> 页面根节点（即 document.documentElement）的 clientHeight，返回值是 viewport 的高度。

可以看出，这些属性有很多重复的含义，当你开发一个功能，你有很多选择，重要的是选择的属性要匹配。

举个例子，开发一个滚动到页面底部加载数据，一个可能的方案如下所示：