jQuery获得一个元素的渲染高度?

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

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

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

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

当前回答

非JQUERY，因为有一堆链接使用element .style.height在这些答案的顶部…

内部高度: https://developer.mozilla.org/en-US/docs/Web/API/Element.clientHeight

document.getElementById(id_attribute_value).clientHeight;

外高度: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.offsetHeight

document.getElementById(id_attribute_value).offsetHeight;

或者是我最喜欢的参考资料之一:http://youmightnotneedjquery.com/

2015-01-26 17:35:14

其他回答

offsetHeight,通常。

如果你需要计算一些东西，但不显示它，将元素设置为visibility:hidden和position:absolute，将它添加到DOM树，获取offsetHeight，然后删除它。(这就是上次我检查的原型库在幕后所做的工作)。

2009-02-13 00:05:22

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

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

罗马，档案。

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

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

2014-03-25 16:24:56

嗯，我们可以得到元素几何…

var geometry;
geometry={};
var element=document.getElementById(#ibims);
var rect = element.getBoundingClientRect();
this.geometry.top=rect.top;
this.geometry.right=rect.right;
this.geometry.bottom=rect.bottom;
this.geometry.left=rect.left;
this.geometry.height=this.geometry.bottom-this.geometry.top;
this.geometry.width=this.geometry.right-this.geometry.left;
console.log(this.geometry);

这个纯JS怎么样?

2018-03-24 21:19:06

MooTools:

$ (' someDiv ') .getSize .y ()

2009-02-13 00:09:08