如何获得元素的渲染高度?

假设你有一个<div>元素,里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时,你如何获得“渲染”的高度。显然,我尝试过:

var h = document.getElementById('someDiv').style.height;

这样做有什么诀窍吗?如果有帮助的话,我正在使用jQuery。


当前回答

document.querySelector('.project_list_div').offsetHeight;

其他回答

document.querySelector('.project_list_div').offsetHeight;

试一试:

var h = document.getElementById('someDiv').clientHeight;
var h = document.getElementById('someDiv').offsetHeight;
var h = document.getElementById('someDiv').scrollHeight;

clientHeight包括高度和垂直填充。

offsetHeight包括高度、垂直填充和垂直边框。

scrollHeight包括所包含文档的高度(在滚动的情况下会大于高度)、垂直填充和垂直边框。

如果你已经在使用jQuery,你最好的选择是. outerheight()或.height(),如上所述。

没有jQuery,你可以检查使用的box-sizing和添加各种填充+边框+ clientHeight,或者你可以使用getComputedStyle:

罗马,档案。

H现在是一个字符串,比如" 538.25 px"。

我找不到引用,但我听说getComputedStyle()很昂贵,所以它可能不是你想在每个窗口调用的东西。onscroll事件(但是,也不是jQuery的height())。

style = window.getComputedStyle(your_element);

然后简单地:style.height

它应该只是

$('#someDiv').height();

与jQuery。这将以数字的形式检索换行集中第一项的高度。

尝试使用

.style.height

只有在您首先设置了该属性时才有效。不是很有用!