为什么浏览器会在style.height上返回空字符串？如何获得元素的实际高度？

Question

简单的一行html:

<div onclick="alert(this.style.height)">sometext</div>

和警报给出:

但它应该像10px或那样.

Answer 1

使用this.style.height时,必须首先在元素上指定高度,如下所示:

<div style="height: 15px;" onclick="alert(this.style.height)">sometext</div>

否则,您应该使用offsetHeight或clientHeight:

<div onclick="alert(this.offsetHeight)">sometext</div>

仅当您显式设置高度时，“高度”才可用。但“offsetHeight”将始终是计算出的高度。如果您不确定何时使用其中任何一个，那么一个简单的提示是在检查其高度时使用“offsetHeight”，在设置新高度时使用“height”。 (2认同)

Answer 2

我的猜测是，您实际上没有任何样式规则来设置元素的高度。要获取元素的实际渲染高度，请使用element.clientHeight。