获取及计算可滚动元素高度:区分clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

获取元素高度

一、基础:理清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop区别

图文可见:https://blog.csdn.net/qq_35430000/article/details/80277587

说的非常详细,这边列表总结如下:

名称 范围
clientHeight content高度(即包括上下padding)
offsetHeight content高度+上下border
scrollHeight 元素可滚动时,content实际高度;因此scrollHeight恒>=offsetHeight
offsetTop 在有滚动条时,滚动条向下滚动的距离也就是元素顶部被遮住部分的高度,无滚动条时为0
scrollTop 当前元素顶部距离最近父元素顶部的距离,和有没有滚动条无关。

如果要获取margin值怎么取?

// ele 表示指定元素dom节点
const marginBt = parseFloat(window.getComputedStyle(ele).marginBottom)

二、获取滚动元素高度

(以vue为例)

<div $ref="listheight">
......
</div>

const listheight = this.$refs.listheight.scrollHeight

三、手动计算指定子元素高度

let chil = this.$refs.listheight.children;
  // 可在for循环中获取任意的子元素,此处为所有元素的offsetHeight以及marginBottom值
  let calculateHeight = 0;
  for(var i = chil.length - 1; i >= 0; i--) {
     
    calculateHeight += chil[i].offsetHeight + parseFloat(window.getComputedStyle(chil[i]).marginBottom);
  }

参考:
https://blog.csdn.net/qq_35430000/article/details/80277587

你可能感兴趣的:(【前端】HTML,CSS相关内容,css,javascript)