JavaScript -如何获取div的真实的高度？

mzillmmw 于 2024-01-05 发布在 Java

关注(0)|答案(3)|浏览(112)

我想在浏览器控制台中获取div class = "group-members"的真实的高度
当页面滚动到底部时，块继续加载
我写了这样的东西来得到它的高度：

var h = window.getComputedStyle(document.getElementsByClassName('group-members'), null).getPropertyValue('height');
window.scroll({
    top: h,
    left: 0,
    behavior: 'smooth'
});

字符串
当我运行这些代码时，

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

型
怎么了？我怎样才能得到这个div变量的高度？

JavaScript

来源：https://stackoverflow.com/questions/71866008/javascript-how-to-get-the-real-height-of-a-div

3条答案

按热度按时间

q7solyqu1#

clientHeight- CSS高度+填充
offsetHeight- CSS高度+填充+边框
scrollHeight-等于clientHeight
getBoundingClientRect()-返回left、top、right、bottom、x、y、width和height属性
getComputedStyle()-返回元素的所有CSS属性
HTMLElement.style-返回定义的元素样式

const clientHeight = document.getElementById('group-members').clientHeight;
console.log('client Height : ', clientHeight);

const offsetHeight = document.getElementById('group-members').offsetHeight;
console.log('offset Height : ', offsetHeight);

const scrollHeight = document.getElementById('group-members').scrollHeight;
console.log('scroll Height : ', scrollHeight);

const getBoundingClientRectHeight = document.getElementById('group-members').getBoundingClientRect().height;
console.log('get Bounding Client Rect Height : ', getBoundingClientRectHeight);

const styleElementHeight = getComputedStyle(document.getElementById("group-members")).height;
console.log('style Element Height : ', styleElementHeight);

const styleHeight = document.getElementById('group-members').style.height;
console.log('style Height : ', styleHeight);

个字符

赞(0）回复(0）举报 2024-01-05

afdcj2ne2#

您需要向window.getComputedStyle传递单个元素
所以你应该这样做：

window.getComputedStyle(document.querySelector('.group-members'))

字符串

赞(0）回复(0）举报 2024-01-05

rpppsulh3#

您可以使用ClientHeight。

document.getElementById("bottomBarHeight")?.clientHeight

字符串

赞(0）回复(0）举报 2024-01-05

我来回答

JavaScript -如何获取div的真实的高度？

3条答案

相关问题

热门标签

最新问答