位置、尺寸属性全解析-CSDN博客

本文针对 BOM 和 DOM 中和位置以及元素尺寸相关的典型属性进行深入讨论，这些属性是使用 Javascript 操纵 DOM 元素的基础，虽然不难理解，然而却容易令人混淆。本文中有相当一部分内容来源于网络，参考资料在文末列出。

window 对象相关

和 window 对象相关的位置、尺寸属性主要有两个。

screenX 和 screenY

浏览器左边界/上边界到用户屏幕的左边界/上边界的水平/垂直像素数。

只读。数据类型： number。只返回整数值。

scrollX 和 scrollY

文档在水平/垂直方向已滚动的像素数。

只读。数据类型： number。只返回整数值。

注意 pageOffsetX 和 pageOffsetY 是 scrollX 和 scrollY 的别名。为了兼容不同的浏览器（包括 IE < 9），请使用以下代码：

const x = (window.pageXOffset !== undefined)
        ? window.pageXOffset
        : (document.documentElement || document.body.parentNode || document.body).scrollLeft;
const y = (window.pageYOffset !== undefined)
        ? window.pageYOffset
        : (document.documentElement || document.body.parentNode || document.body).scrollTop;
复制代码

MouseEvent 类相关

和 MouseEvent 类相关的位置、尺寸属性主要有四个。

screenX 和 screenY

鼠标到用户屏幕的左边界/上边界的水平/垂直像素数。

只读。数据类型： number。只返回整数值。
clientX 和 clientY

鼠标想对于浏览器边框的水平/垂直像素数。

只读。数据类型： number。只返回整数值。
pageX 和 pageY

鼠标想对于整个文档的水平/垂直像素数。

只读。数据类型： number。只返回整数值。

pageX 和 pageY会考虑页面的的滚动，注意与 clientX 和 clientY 的区别：

从上面的解释可以看出如下关系：
```
mouseEvent.pageY - mouseEvent.clientY === window.scrollY;   // true
复制代码
```
offsetX 和 offsetY

鼠标与目标节点的 padding 外边沿的水平/垂直距离。

只读。数据类型： number。只返回整数值，单位：px。

需要注意两点：
- offsetX 和 offsetY 是相对于 mouseEvent.target 的，这是和前面三个属性不一样的地方
- offsetX 和 offsetY 不包括 border 的宽度

HTMLElement 类相关

接下来重点介绍 HTMLElement 类相关的位置和尺寸属性。主要涉及三个部分，下面分别说明。

该部分主要来源于Element size and scrolling

接下来会结合如下例子进行说明：

先贴出这张说明图：

client*

为了描述的简洁，client* 意为 client 开头的属性，后文类似

分为两部分，分别描述位置和尺寸。

clientLeft 和 clientTop

一个元素的左边框/上边框的像素数。如果元素的文本方向是从右向左（RTL, right-to-left），并且由于内容溢出导致左边出现了一个垂直 scrollbar，则该属性包括该 scrollbar 的宽度。

只读。数据类型： number。只返回整数值。

在上面的例子中， clientLeft 和 clientTop 分别等于对应的 border 宽度：

然而，在从右至左的文档下并且有滚动条的情况时，clientLeft 还包括了滚动条的宽度（虽然这种情况不常见）：
clientWidth 和 clientHeight

元素内部的大小，以像素值表示。即 border 以内的部分（包括 padding），不包括 scrollbar 、border 、 margin 和溢出的部分。

只读。数据类型： number。只返回整数值。

需要注意的是 scrollbar 的宽度会占据 CSS width ，即：
```
getComputedStyle(element).width   // 300px
复制代码
```

scroll*

分为两部分，分别描述位置和尺寸。

scrollLeft 和 scrollTop

获取或设置一个元素的内容滚动的像素数。

数据类型： number。只返回整数值。

scrollLeft 和 scrollTop 可以被设置为任何整数值用来设置元素滚动的距离，但是需要注意的是：
- 如果一个元素不能被滚动（例如，它没有溢出，或者这个元素有一个"non-scrollable"属性）， scrollTop将被设置为0
- 设置scrollTop的值小于0，scrollTop 被设为0
- 如果设置了超出这个容器可滚动的值, scrollTop 会被设为最大值
scrollWidth 和 scrollHeight

元素的内部大小，以像素值表示。相比于 clientWidth 和 clientHeight ，包括溢出的部分。

只读。数据类型： number。只返回整数值。

offset*

分为两部分，分别描述位置和尺寸。

offsetLeft 和 offsetTop

相对于 offsetParent 的水平/垂直像素值。

只读。数据类型： number。只返回整数值。
offsetWidth 和 offsetHeight

元素的外部大小，以像素值表示。相比于 clientWidth 和 clientHeight ，包括 border 和 scrollbar。

只读。数据类型： number。只返回整数值。