目录
- 1. 元素可见大小
- 1.1 element.clientWidth && element.clientHeight
- 1.2 element.clientLeft && element.clientTop
- 2. 页面偏移
- 2.1 element.offsetParent
- 2.2 element.offsetHeight && element.offsetWidth
- 2.3 element.offsetLeft && element.offsetTop
- 3. 滚动距离
- 3.1 element.scrollHeight && element.scrollWidth
- 3.2 element.scrollLeft && element.scrollTop
- 4. getBoundingClientRect()
- 5. 其他属性
在学习过程中，遇到了关于浏览器窗口位置获取的相关知识，有很多相关的属性，所以整理、区分一下这些属性。
1. 元素可见大小
属性 | 说明 |
element.clientHeight | 返回元素的可见高度 |
element.clientWidth | 返回元素的可见宽度 |
element.clientLeft | 返回元素节点左边框的宽度 |
element.clientTop | 返回元素节点上边框的宽度 |
1.1 element.clientWidth && element.clientHeight
element.clientHeight属性返回元素节点可见部分的高度，element.clientWidth属性返回元素节点可见部分的宽度。这两个属性包含元素的padding值，但是不包含元素的margin值、边框以及滚动条。
clientWidth = padding-left + width + padding-right
clientHeight = padding-top + height + padding-bottom
1.2 element.clientLeft && element.clientTop
element.clientLeft属性等于元素节点左边框的宽度，element.clientTop属性等于网页元素顶部边框的宽度，单位为像素。这两个属性都包括滚动条的宽度，但是不包括margin和padding值，不过几乎不会出现左侧和顶部滚动条的情况。
需要注意：如果元素设置为display: inline，那么它的 element.clientLeft为0 。
clientLeft = border-left-width
clientTop = border-top-width
2. 页面偏移
属性 | 说明 |
element.offsetParent | 返回元素的偏移容器 |
element.offsetHeight | 返回元素的高度，包括边框和填充，但不是边距 |
element.offsetWidth | 返回元素的宽度，包括边框和填充，但不是边距 |
element.offsetLeft | 返回当前元素的相对水平偏移位置的偏移容器 |
element.offsetTop | 返回当前元素的相对垂直偏移位置的偏移容器 |
2.1 element.offsetParent
element.offsetParent属性与定位有着很大的关系，它的定义是：与当前元素最近的经过定位的父级元素。主要有以下几种情况：
- 元素自身有
fixed定位，那么offsetParent结果就是null - 元素本身没有
fixed定位，父级元素经过定位，那么offsetParent的结果为离自身元素最近的的经过定位的父级元素。 - 元素本身没有
fixed定位，且父元素未经过定位，那么offsetParent的结果为<body> -
<body>元素的offsetParent结果为是null
2.2 element.offsetHeight && element.offsetWidth
element.offsetHeight属性返回元素的垂直高度，element.offsetWidth属性返回元素的水平宽度。这两个属性包含了padding，border和滚动条。也就是说，如果不发生溢出，element.offsetHeight只比element.clientHeight多了边框的高度。
需要注意：如果存在垂直滚动条，offsetWidth包括垂直滚动条的宽度；如果存在水平滚动条，offsetHeight包括水平滚动条的高度
offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width
offsetHeight = border-top-width + padding-top + height + padding-bottom + border-bottom-width
2.3 element.offsetLeft && element.offsetTop
offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
3. 滚动距离
属性 | 说明 |
element.scrollHeight | 返回整个元素的高度（包括带滚动条的隐蔽的地方） |
element.scrollWidth | 返回元素的整个宽度（包括带滚动条的隐蔽的地方） |
element.scrollLeft | 返回当前视图中的实际元素的左边缘和左边缘之间的距离 |
element.scrollTop | 返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离 |
3.1 element.scrollHeight && element.scrollWidth
element.scrollHeight属性返回整个元素的总高度， element.scrollWidth属性返回整个元素的总宽度。我们可以理解为元素在垂直或水平方向上可以滚动的距离。
它们返回的是整个元素的高度和宽度，包括由于滚动条而不可见的部分。默认情况下，这两个属性包括padding，但是不包括margin和border。
如果元素没有发生溢出（没出现滚动条），那么scrollHeight和clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。
scrollWidth = padding-left + width + padding-right + 滚动条距离
scrollHeight = padding-top + height + padding-bottom +
3.2 element.scrollLeft && element.scrollTop
element.scrollLeft属性表示元素的水平滚动条向右侧滚动的距离，element.scrollTop属性表示元素的垂直滚动条向下滚动的距离。
如果没有出现滚动条，那上面的两个属性值就是0。这两个属性都可以读写，对属性值进行设置，就会使得浏览器将指定元素滚动到相应的位置。
4. getBoundingClientRect()
getBoundingClientRect()是DOM中element方法，该方法返回元素的大小以及其相对于视口的距离（不包含滚动条距离）。
该方法返回的是一个DOMRect对象，该对象中包含了buttom、top、width、height、left、right、x、y这几个属性，这些属性都是只读属性，除了width和height之外，其他属性都是按照视口窗口的左上角来计算的。
示例：
<style>
.pic{
width: 300px;
height: 300px;
margin: 50px;
}
</style>
<body>
<img src="学校.jpg" class="pic">
</body>
<script>
const img = document.querySelector('.pic');
console.log(img.getBoundingClientRect());
<script>
5. 其他属性
属性 | 说明 |
clientX | 返回当事件被触发时，鼠标指针距离浏览器可视口左边的水平坐标 |
clientY | 返回当事件被触发时，鼠标指针距离浏览器可视口上边的垂直坐标 |
screenX | 返回当某个事件被触发时，鼠标指针距离屏幕左边的水平坐标 |
screenY | 返回当某个事件被触发时，鼠标指针距离屏幕上边的垂直坐标 |
pageX | 鼠标指针的位置，相对于文档的左边的距离，包括滚动条的距离 |
pageY | 鼠标指针的位置，相对于文档的上边的距离，包括滚动条的距离 |
offsetX | 元素左边距离带有定位的父元素的左边的距离 |
offsetY | 元素上边距离带有定位的父元素的上边的距离 |
