scroll、offset、client —— JS三大家族

简介：

clientHeight: 元素的可见高度，不包括边框和滚动条，是相对于视口的大小——clientHeight = (content height) + (padding top+padding bottom)。
offsetHeight: 元素的高度，包括边框和滚动条，但不包括外边距 —— offsetHeight = （content height） + padding + border。
scrollHeight: 元素内容的总高度，包括不可见部分，包括padding，伪元素::before或::after的高度，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），需要通过滚动条才能查看。

使用场景:

clientHeight: 当需要获取元素在视口中的可见高度时，可以使用clientHeight。
offsetHeight: 当需要获取元素的总高度，包括边框和滚动条时，可以使用offsetHeight。
scrollHeight: 当需要获取元素内容的总高度，包括不可见部分时，可以使用scrollHeight。

代码示例：

// 获取元素的可见高度
var element = document.getElementById('myElement');
var clientHeight = element.clientHeight;

// 获取元素的总高度
var offsetHeight = element.offsetHeight;

// 获取元素内容的总高度
var scrollHeight = element.scrollHeight;

注意事项：

1. clientHeight:

- clientHeight是元素在视口中的可见高度，不包括滚动条和外边距。
- 当元素的内容超出视口高度时，clientHeight不会包括溢出的部分。
- 当元素的display属性为none时，clientHeight为0。

2. offsetHeight:

- offsetHeight是元素的总高度，包括内容、内边距、边框，但不包括外边距。
- 当元素的display属性为none时，offsetHeight为0。

3. scrollHeight:

- scrollHeight是元素内容的总高度，包括不可见部分，需要通过滚动条才能查看。
- 当元素的内容没有溢出时，scrollHeight等于元素的clientHeight。
- 当元素的内容超出视口高度时，可以使用scrollHeight来获取整个内容的高度，以便进行滚动操作。

4.获取内容的实际高度content height：(只有height ，不包括padding、border、margin)

window.getComputeStyle(obj).height

5.getBoundingClientRect()方法
getBoundingClientRect()方法用于获取元素位置，这个方法没有参数，可以获取页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

getBoundingClientRect方法返回的rect对象，rect对象具有以下属性（全部为只读）：

x：元素左上角相对于视口的横坐标
y：元素左上角相对于视口的纵坐标
height：元素高度
width：元素宽度
left：元素左上角相对于视口的横坐标，与x属性相等
right：元素右边界相对于左边视口的横坐标（等于x + width）
top：元素顶部相对于视口的纵坐标，与y属性相等
bottom：元素底部相对于上边视口的纵坐标（等于y + height）

scroll、offset、client —— JS三大家族

猜你喜欢