元素位置尺寸获取汇总, offsetxx系列, clientxx系列, scrollxx系列及其他方法

本文链接：https://blog.csdn.net/fanweilin0123/article/details/135656434

offset 系列

offsetParent: 得到某个子元素最邻近一个使用了定位的父元素，包括 sticky, absolute, fixed, relative。如果父元素都没有定位，得到 document.body 元素。注意，如果子元素本身设置了 fixed 属性, 则返回 null;
offsetLeft: 该元素相对于 offsetParent 父元素左侧的偏移距离，从该元素的外边框算起，至父元素的内边框，如果 offsetParent 为 null, 则相对于 document.body;
offsetTop: 该元素相对于 offsetParent 父元素上侧的偏移距离，其他含义同 offsetLeft;
offsetWidth: 元素的布局宽度, 包括设置的左右边框, 左右内边距, 垂直滚动条(如果存在)，以及 css设置的宽度或者内容撑开的宽度;
offsetHeight: 元素的布局高度, 包括设置的上下边框, 上下内边距, 横向滚动条(如果存在)，以及 css设置的高度或者内容撑开的高度;

下图所示的黑色实心边框元素的值:

如果想要获取元素相对文档的距离, 使用offsetLeft或者offsetTop时, 需要计算对应父元素的边框宽度。因为得到的是布局位置, 所以类似 margin-top, top 等能影响位置的值都会对结果造成影响, 获取到的是最终值, 可能为负数。这些值只有元素渲染完成了才能获取到, 如果存在异步渲染出现的, 就会存在误差。该系列获取的值都是整型。

client系列

clientHeight: 返回元素内部高度, 包括内边距, 不包括边框, 水平滚动条(如果存在);
clientWidth: 返回元素内部宽度, 包括内边距, 不包括边框, 垂直滚动条(如果存在);
clientLeft: 返回元素的左边框的宽度，以像素表示。如果元素的文本方向是从右向左, 并且由于内容溢出导致左边出现了一个垂直滚动条，则该属性包括滚动条的宽度。根据这个特性可快速获取滚动条宽度, 可查看详细代码;
clientTop: 返回元素顶部边框的宽度, 以像素表示;

下图所示的黑色实心边框元素的值:

表示的是元素内部的宽高, 如果内部宽高超过了上层容器出现了滚动, 元素未出现在可见区域内也是包括的。该系列获取的值都是整型

scroll系列

scrollHeight: 元素的滚动高度, 为该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。与子元素相关, 比如某元素高度设置 500px, 内部有内容高度设置 1000px, 那么该元素 scrollHeight 值为 1000。包括该元素内边距, 不包括边框，外边距，滚动条(如果存在);
scrollWidth: 元素的滚动宽度, 为元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。同 scrollHeight 含义类似;
scrollLeft: 可以读取或设置元素滚动条到元素左边的距离, 需要注意几个点如下;
1. 如果元素不能滚动（比如：元素没有溢出），那么scrollLeft 的值是 0;
2. 如果给scrollLeft 设置的值小于 0，那么scrollLeft 的值将变为 0;
3. 如果给scrollLeft 设置的值大于元素内容最大宽度，那么scrollLeft 的值将被设为元素最大宽度;
scrollTop: 可以获取或设置一个元素的内容垂直滚动的像素数, 其他的同 scrollLeft;

尺寸关系如下图所示: