JS获取元素的高度_js 获取元素高度-优快云博客

本文链接：https://blog.youkuaiyun.com/zuo_zuo_blog/article/details/121353882

本文探讨了CSS样式获取的几种方法，如offsetHeight、clientHeight、getComputedStyle以及getBoundingClientRect，并展示了它们在元素高度计算中的应用。同时，介绍了Vue中父子组件数据通信的watch监听机制，强调了在beforeUpdate和updated生命周期钩子中监听父组件传值的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.offsetHeight

var div = document.getElementById('demo');
console.log(div.offsetHeight); // 244 注意这里返回的值不带有单位

offsetHeight的值包括元素内容+内边距+边框

offsetHeight = content + padding + border = 200 + 20 * 2 + 2 * 2 = 244

2、clientHeight

var div = document.getElementById('demo');
console.log(div.clientHeight); // 240 注意这里返回的值不带有单位

clientHeight的值包括元素内容+内边距

clientHeight = content + padding = 200 + 20 * 2 = 240

3、window.getComputedStyle()
getComputedStyle()获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的属性都显示出来）并且getComputedStyle()是只读的，通过getPropertyValue()获取CSS样式申明对象上的属性值。

console.log(window.getComputedStyle(div).getPropertyValue("height")); //200px  注意这里返回的值带有单位。

4、getBoundingClientRect()
getBoundingClientRect()方法获取与元素相关的CSS属性边框集合。返回对象中共有以下几个属性：

var div = document.getElementById('demo');
console.log(div.getBoundingClientRect().height);// 244

height的属性值 = 元素内容+内边距+边框

5.项目遇到父组件传值给子组件，子组件监听数据变化可以用watch监听数据变化

在这里插入图片描述
如果要在子组件打印父组件传来的数据必须是在beforeUpdate和updated生命周期才能监听的到，

6.vue获取某个标签的高度,渲染后的高度
在这里插入图片描述
参考
this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsmHeight = this.$ refs.inforTitleR.clientHeight - 20 + “px”;
});