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

简介:

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

使用场景:

  • 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_offset、client、scroll三大家族!-CSDN博客

你可能感兴趣的:(前端知识总结,javascript,前端,开发语言)