如何获得元素的渲染高度?
假设你有一个<div>元素，里面有一些内容。里面的内容将扩展<div>的高度。当你没有显式地设置高度时，你如何获得“渲染”的高度。显然，我尝试过:
var h = document.getElementById('someDiv').style.height;
这样做有什么诀窍吗?如果有帮助的话，我正在使用jQuery。
当前回答
我用它来获取一个元素的高度(返回浮点数):
document.getElementById('someDiv').getBoundingClientRect().height
当您使用虚拟DOM时，它也可以工作。我在Vue中这样使用它:
this.$refs['some-ref'].getBoundingClientRect().height
对于Vue组件:
this.$refs['some-ref'].$el.getBoundingClientRect().height
其他回答
为此，您可以使用. outerheight()。
它会给你元素的完整渲染高度。此外，您不需要设置元素的css-height。为预防起见，你可以保持它的高度自动，这样它就可以根据内容的高度来渲染。
//if you need height of div excluding margin/padding/border
$('#someDiv').height();
//if you need height of div with padding but without border + margin
$('#someDiv').innerHeight();
// if you need height of div including padding and border
$('#someDiv').outerHeight();
//and at last for including border + margin + padding, can use
$('#someDiv').outerHeight(true);
想要更清楚地了解这些函数，你可以访问jQuery的网站或这里的详细文章。
它将清除.height() / innerHeight() / outerHeight()之间的差异
嗯，我们可以得到元素几何…
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怎么样?
一定使用
$('#someDiv').height() // to read it
or
$('#someDiv').height(newHeight) // to set it
我把这个作为一个额外的答案，因为我刚刚学到一些重要的东西。
我差点掉进了刚才使用offsetHeight的陷阱。事情是这样的:
我使用了使用调试器的老技巧来“观察”我的元素具有哪些属性 我看到了哪个值在我期望的值附近 它是offsetHeight，所以我用了它。 然后我意识到它不工作与隐藏DIV 我试着在计算maxHeight后隐藏，但看起来笨拙-弄得一团糟。 我搜索了一下——发现了jQuery.height()——并使用了它 发现height()甚至适用于隐藏元素 只是为了好玩，我检查了高度/宽度的jQuery实现
以下只是其中的一部分:
Math.max(
Math.max(document.body["scroll" + name], document.documentElement["scroll" + name]),
Math.max(document.body["offset" + name], document.documentElement["offset" + name])
)
是的，它既看滚动和偏移。如果失败了，考虑到浏览器和css兼容性问题，它会进一步考虑。换句话说，那些我不关心或者不想关心的东西。
但我不需要。由于jQuery !
这个故事的寓意是:如果jQuery为某件事提供了一个方法，那么它可能有一个很好的理由，很可能与兼容性有关。
如果你最近还没有通读jQuery的方法列表，我建议你看一看。
我做了一个简单的代码，甚至不需要JQuery，可能会帮助一些人。 它在加载后得到ID1的总高度并在ID2上使用它
function anyName(){
var varname=document.getElementById('ID1').offsetHeight;
document.getElementById('ID2').style.height=varname+'px';
}
然后设置主体来加载它
<body onload='anyName()'>
offsetHeight,通常。
如果你需要计算一些东西，但不显示它，将元素设置为visibility:hidden和position:absolute，将它添加到DOM树，获取offsetHeight，然后删除它。(这就是上次我检查的原型库在幕后所做的工作)。
