¿Por qué el navegador está devolviendo una cadena vacía en style.height? ¿Cómo obtener la altura real de un elemento?

Question

simple una línea de html:

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

y alerta da:

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

pero debe ser como 10px o algo por el estilo.

Answer 1

Cuando se utiliza this.style.height, la altura debe haber sido especificado en el primer elemento, como esto:

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

De lo contrario, probablemente debería utilizar offsetHeight o clientHeight:

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

Answer 2

Supongo que no tiene ninguna regla de estilo que establezca la altura del elemento. Para obtener la altura renderizada real de un elemento, use element.clientHeight.

Answer 3

Use la propiedad CustomerHeight o offsetHeight. Marque esta url

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

Answer 4

object.style.whatever devuelve los valores que se han creado con el atributo de estilo en el marcado, o la propiedad de estilo en la escritura, por lo tanto:

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

o

theDiv.style.height = "10px"; 

El método getComputedStyle le permite acceder a las propiedades de estilo, ya que están definidas por la cascada (es decir, usando @style que el anterior, o cualquier mecanismo o <stylesheet>...</stylesheet>)

EDIT: puede beneficiar a utilizar una biblioteca de JS establecida navegadores, en lugar de acceder a este inmueble directamente, y tienen que hacer frente a las peculiaridades de los diversos navegadores. Las versiones anteriores de IE (por ejemplo) no son compatibles con este método.