[SOLUCIONADO] Modificar altura div con js

melkart239 · #1 (**permalink**) 22/09/2016, 04:19

Saludos.
Ya sé que hay varios hilos sobre este tema. He estado viéndolos y mi código coincide con lo que he visto. Pero no funciona. Presupongo que debe ser alguna tontería de la que no me doy cuenta.
El objetivo es hacer que un div cambie de altura según la altura de la ventana del navegador, sobre la marcha( esto quiere decir que si el usuario hace más pequeña la ventana el div active el auto scroll, pero a eso aún no he llegado).
Tengo este div:

Código:

<div id="lateral">
   <ul>
      <li>Para menú</li>
      <li>Para menú</li>
      <li>Para menú</li>
   </ul>
</div>

Con este estilo:

Código:

#lateral{
    width: 18%;
    background-color: #ffffcc;
    padding: 1%;
    /*overflow: auto;*/
    height: 300px;
    float: left;
}

Estas son las llamadas a los scripts de js en head:

Código:

        <script type="text/javascript" src="sinframes.js"></script>
        <link type="text/css" rel="stylesheet" href="sinframes.css" />
        <script type="text/javascript">window.onload=alturalateral;</script>

Y esta la funcion:

Código:

function alturalateral(){
	var h = window.innerHeight;
	var hlateral = document.getElementById('lateral');
	var hhlateral = hlateral.style.height;
}

En el navegador hago el debug paso a paso de esta tonta función y me dice que el valor de la variable hhlateral = ''
No tengo ni idea de qué falla, a ver si alguna neurona preclara me da luz.
Gracias por adelantado.

mpozo · #2 (**permalink**) 22/09/2016, 06:03

Nada tiene que ver en este asunto javascript. La unidad del height ponla en porcentaje (%) y al bloque le asignas la propiedad position: absolute;

Código CSS:

Ver original#lateral{
    width: 18%;
    background-color: #ffffcc;
    padding: 1%;
    overflow: auto;
    height: 50%;
    float: left;
    position: absolute;
}

melkart239 · #3 (**permalink**) 22/09/2016, 06:15

Ok. Agradezco tu aportación. Esto facilitará mi objetivo final. Pero es que quiero modificar la altura del div. Mientras la variable var hhlateral = hlateral.style.height me siga dando como resultado '', no puedo hacerlo.

Código:

hlateral = document.getElementById('lateral');

mpozo · #4 (**permalink**) 22/09/2016, 08:01

style.height se usa para cambiar el valor del alto del elemento.Para obtener el alto del elemento sólo es necesario la propiedad heigth, offsetHeight o clientHeigth
[URL="http://www.google.es/search?q=element.height+vs+element.style.height&sp ell=1&sa=X&ved=0ahUKEwia1ICXk6PPAhXjA8AKHbATC-4QvwUIDCgA"]http://www.google.es/search?q=element.height+vs+element.style.height&sp ell=1&sa=X&ved=0ahUKEwia1ICXk6PPAhXjA8AKHbATC-4QvwUIDCgA[/URL]

melkart239 · #5 (**permalink**) 22/09/2016, 12:41

Muchas gracias. Solucionado.
Sólo height, sin style, no funciona, offsetHeight funciona y clientHeght no lo he probado-

mpozo · #6 (**permalink**) 23/09/2016, 06:31

La propiedad height retorna el alto de aquellos elementos en los que se reserva un espacio para ellos, por ejemplo; una imagen, nunca un bloque. Retornará el alto real de la imagen siempre y cuando la imagen no se establezca la propiedad height. Para obtener el alto real de la imagen, se haya establecido la propiedad height o no, se usa naturalHeight. Un ejemplo

Código HTML:

Ver original<!DOCTYPE html>
<html dir="ltr" lang="es-es">
    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
            img {
                height: 600px;
            }
        </style>
        <script>
          window.addEventListener('load', function() {
            console.log(document.querySelector('img').height); // 600
            console.log(document.querySelector('img').naturalHeight); // 360
          }, false);
    </script>
    </head>
    <body>
 
        <img src="http://s03.s3c.es/imag/_v0/640x360/c/b/9/coches-caros-veneno.png">
 
    </body>
</html>