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

Question

简单的一行html：

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

并提醒：

http://i55.tinypic.com/2rxdtgo.png

但它应该像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>

Answer 2

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

Answer 3

使用clientHeight或offsetHeight属性。检查此网址

http://help.dottoro.com/ljuxqbfx.php

Answer 4

object.style.whatever仅返回使用标记中的style属性或脚本中的style属性设置的值，因此：

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

或

theDiv.style.height = "10px";

方法getComputedStyle允许您访问样式属性，因为它们是由级联定义的（即使用上面的@style或<stylesheet>...</stylesheet>或任何机制）

编辑： 使用已建立的跨浏览器JS库可能对您有所帮助，而不是直接访问此属性，并且必须处理各种浏览器的怪癖。较旧版本的IE（例如）不支持此方法。