clientHeight(width)(top)、scrollHeight(width)(top)、offsetHeight(width)(top)的详细区别

最新推荐文章于 2025-04-27 13:42:17 发布

编程小飞

最新推荐文章于 2025-04-27 13:42:17 发布

阅读量660

点赞数 1

本文链接：https://blog.youkuaiyun.com/qq_44606064/article/details/117198393

版权

MDN搬运工，这里整理一下方便之后学习查看。

1.Client家族

1.clientHeight：

可以通过 CSS height + CSS padding - 水平滚动条高度 (如果存在)来计算.
在这里插入图片描述

2.clientWidth

属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
在这里插入图片描述

3.clientTop、clientLeft

一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。就是border
在这里插入图片描述

2.offset家族

1.offsetHeight、offsetWidth

HTMLElement.offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

通常，元素的offsetHeight是一种元素CSS高度的衡量标准，包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度。

对于文档的body对象，它包括代替元素的CSS高度线性总含量高。浮动元素的向下延伸内容高度是被忽略的。

如果元素被隐藏（例如元素或者元素的祖先之一的元素的style.display被设置为none），则返回0
在这里插入图片描述

2.offsetTop

HTMLElement.offsetTop 为只读属性，它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

3.Scroll家族

1.scrollHeight

Element.scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同。包括元素的padding，但不包括元素的border和margin。scrollHeight也包括 ::before 和 ::after这样的伪元素。

2.scrollWidth

Element.scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
scrollWidth值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与clientWidth相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如::before或::after。如果元素的内容可以适合而不需要水平滚动条，则其scrollWidth等于clientWidth

3.scrollTop、scrollLeft

Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。

一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。

4.辅助理解案例一，没有滚动效果

<style>
  *{
    margin: 0;
    padding: 0;
  }
  #box{
    width: 100px;
    height: 100px;
    border: 10px solid black;
    margin: 1px 5px ;
    padding: 2px 1px;
  }
</style>
<body>
  <div id="box"> 
    
  </div>
  <div id="test">test</div>
</body>
<script>
  /* 
  */
  let box = document.getElementById('box')
  console.log('clientHeight:',box.clientHeight)
  console.log('clientWidth:',box.clientWidth)
  console.log('clientWidth:',box.clientTop)
  console.log('clientLeft:',box.clientLeft)
  console.log('---------------------------')
  console.log('scrollHeight:',box.scrollHeight)
  console.log('scrollWidth:',box.scrollWidth)
  console.log('scrollTop:',box.scrollTop)
  console.log('---------------------------')
  console.log('offsetHeight:',box.offsetHeight)
  console.log('offsetWidth:',box.offsetWidth)
  console.log('offsetTop:',box.offsetTop)
  let test = document.getElementById('test')
  console.log('test-offsetTop:',test.offsetTop)
</script>

在这里插入图片描述

5.辅助理解案例二，带滚动条

<style>
  * {
    margin: 0;
    padding: 0;
  }

  #box {
    width: 100px;
    height: 100px;
    border: 10px solid black;
    overflow-x: hidden;
    overflow-y: scroll;
    /* padding: 2px 1px; */
  }

  #innerbox {
    width: 100px;
    /* padding: 10px;
    border: 1px solid red; */
  }
</style>

<body>
  <div id="box">
    <div id="innerbox">
      可理解为内部可视区高度，样式的height+上下paddingscro
      内容的实际高度+上下padding（如果没有限制div的height，
    </div>
  </div>
</body>
<script>
 /* 
  
clientHeight: 可理解为内部可视区高度，样式的height+上下padding

scrollHeight: 内容的实际高度+上下padding（如果没有限制div的height，即height是自适应的，一般是scrollHeight==clientHeight）

offsetHeight:可理解为div的可视高度，样式的height+上下padding+上下border-width。

clientTop: 容器内部相对于容器本身的top偏移，实际就是 上border-width （div1是10px，div2是20px）

scrollTop: Y轴的滚动条没有，或滚到最上时，是0；y轴的滚动条滚到最下时是 scrollHeight-clientHeight（很好理解）

offsetTop: 容器到其包含块顶部的距离，粗略的说法可以理解为其父元素。 offsetTop = top + margin-top + border-top

  
  */
 
  let box = document.getElementById('box')
  console.log('clientHeight:', box.clientHeight)
  console.log('clientWidth:', box.clientWidth)
  console.log('clientTop:', box.clientTop)
  console.log('clientLeft:', box.clientLeft)
  console.log('---------------------------')
  console.log('scrollHeight:', box.scrollHeight)
  console.log('scrollWidth:', box.scrollWidth)
  console.log('scrollTop:', box.scrollTop)
  console.log('---------------------------')
  console.log('offsetHeight:', box.offsetHeight)
  console.log('offsetWidth:', box.offsetWidth)
  console.log('offsetTop:', box.offsetTop)
  let outerbox = document.getElementById('box')
  outerbox.addEventListener('scroll', function () {
    let box = document.getElementById('box')
    console.log("滑动时候的值")
    console.log('clientHeight:', box.clientHeight)
    console.log('clientWidth:', box.clientWidth)
    console.log('clientTop:', box.clientTop)
    console.log('clientLeft:', box.clientLeft)
    console.log('---------------------------')
    console.log('scrollHeight:', box.scrollHeight)
    console.log('scrollWidth:', box.scrollWidth)
    console.log('scrollTop:', box.scrollTop)
    console.log('---------------------------')
    console.log('offsetHeight:', box.offsetHeight)
    console.log('offsetWidth:', box.offsetWidth)
    console.log('offsetTop:', box.offsetTop)
  })
  })
</script>