¿Cómo saber la altura de un div con min-height y max-height?

Pimager · #1 (**permalink**) 05/08/2013, 01:01

Hola a todos, tengo un div tal que así:

Código:

<div id="div1" style="display:block;min-height:44px; max-height:60px;">
...
</div

El problema está en que cuando se redfimensiona la ventana, dicho div puede variar su tamaño entre 44 y 60px, pero si hago un

Código:

alert(document.getElementById("div1").style.height);

, el resultado es cadena vacía.
¿Cómo puedo saber la altura que tiene el div en todo momento?

Muchas gracias

#2 (**permalink**) 05/08/2013, 04:34

No es estable, no se puede saber...

Tecna · #3 (**permalink**) 05/08/2013, 05:56

Buenas,

claro que se puede, pero hay que preguntar por el estilo calculado que es el que realmente se aplica después de analizar todas las reglas que afecten a cada propiedad de cada elemento. Si el estilo no se ha declarado en línea no se puede obtener su valor con la propiedad style. Y si se ha cambiado después de analizar los estilos, el valor calculado no es el correcto, es decir no se actualiza. Así que todo depende de como se estén tratando los estilos y de lo que se quiera conseguir.

Código HTML:

Ver original<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="Language" content="Spanish">
 
<script type="text/javascript" src="scripts/estilos_computados.js"></script>
 
<title>estilos computados</title>
<style>
    body, html {height: 100%;}
    #padre {height: 100%; background: #ff0;}
    #padre p { height: 40%; max-height: 400px; background: #f00;}
 
</style>
</head>
<body>
<div id="padre">
    <p>prueba estilos computados</p>
</div>
</body>
</html>

Código Javascript:

Ver originalfunction init()
{
    var papi = document.getElementById('padre');
    alert('valor propiedad height aplicada con etiqueta style: ' + papi.style.height);     //vacio
    var estilo = window.getComputedStyle(papi, null).height;
    alert('valor calculado de la propiedad height: ' + estilo); // aqui si que muestra el valor
    papi.style.height = '385px';
    papi.style.height = '50%';  // de igual que se usen medidas absolutas o relativas
    alert('valor de la propiedad height despues de cambiarla en linea: '+ papi.style.height);
    alert('valor calculado de la propiedad height: ' + estilo); //sigue siendo el mismo
}
 
window.onload = init;

Panino5001 · #4 (**permalink**) 05/08/2013, 06:09

También probaría con:

Código PHP:

  alert(document.getElementById("div1").style.offsetHeight);