Cómo calculo height de un div y se lo pongo al css?

yavierre · #1 (**permalink**) 07/07/2012, 18:43

Hola a todos! necesitaba que me ayudasen con un problema

Lo que pasa es que tengo mi sitio web, y en la barra lateral con todos los botones de navegación, hay un div el cual tiene un título fijo, y un contenido de texto variable, el problema es que necesito saber el HEIGHT de ese div, ya que está medio escondido en la página, y aparece cuando paso el cursor sobre él con un MARGIN-TOP, la idea es que el valor del MARGIN-TOP que defino por CSS a ese div, sea igual a su HEIGHT, es decir, según la altura del div, se extenderá el div y aparecerá en pantalla.

Para dar un idea iré al grano
Podría medir el HEIGHT de ese div, con un Javascript, y el valor que me dé, lo uso en el MARGIN-TOP en CSS, y yo no me domino con Javascript :s
He encontrado varios resultados en google de cómo medir el height de un div con Javascript, pero ninguno me deja claro cómo introducir ese valor, en el valor de un tag del CSS (en este caso, el Margin-top)

Dejaré aquí el código para dejarlo más claro

Código CSS:

Ver original#descripcion{
    background-color:rgba(255,255,255,0.7);
    filter:alpha(opacity=70);
    position:fixed;
    top:100%;
    margin-top:-65px;
    padding:6px;
    height:75px; /*este height siempre será 75px, porque es para que se vea el titulo*/
    width:275px;
    overflow:hidden;
    -webkit-transform: rotate(4deg); 
    -moz-transform: rotate(4deg);
    -transition: all 0.35s ease;
    -webkit-transition: all 0.35s ease;
    -moz-transition: all 0.35s ease;
}   
 
    #descripcion h1{margin-top:10px;font-size:28px;}
    
#descripcion:hover{
    width:275px;
    height:250px; /*por ahora dejo fijo el valor del height, pero debería estar en "auto" supuestamente*/
    margin-top:-250px; /*el margin-top que debería tener el mismo valor que tiene el HEIGHT estando en "auto")
    
    -transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg);
}

Y en cuanto al html

Código HTML:

Ver original<div id="descripcion">
<h1><b>Título</b></h1>
<div id="metadescription"><h7><i>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</i></h7></div>
</div>

Se los agradezco de antemano

rodrigo791 · #2 (**permalink**) 07/07/2012, 19:08

Para accedere a las propiedades css de un elemento, usa DOM.
http://librosweb.es/javascript/capitulo5.html

yavierre · #3 (**permalink**) 07/07/2012, 19:35

Cita:

Iniciado por rodrigo791

Para accedere a las propiedades css de un elemento, usa DOM.
[url]http://librosweb.es/javascript/capitulo5.html[/url]

Lo leí todo, pero aún no me queda muy claro cómo solucionar el problema D: soy bastante torpe con Js, XHTML y todo eso de programar

cualquier cosa trataré de leerla y entenderla pero aún no me queda claro cómo solucionarlo, aún así MUCHAS GRACIAS

por lo menos entendí para qué servía todo eso de getElementById y cosas parecidas que leía antes :D

Alguien puede aclarme esto?

rodrigo791 · #4 (**permalink**) 07/07/2012, 20:02

con eso que entendiste capturas el 'height' del elemento que quieras.

var alto = document.getElementById('elemento').height

yavierre · #5 (**permalink**) 07/07/2012, 20:29

Perfecto!

pero cómo puedo introducir ese valor que obtuvo, en el "margin-top" del CSS?

furoya · #6 (**permalink**) 07/07/2012, 21:32

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJJJJ.</title>
<script type="text/javascript">

var charly, eco;

function hovering0(){
charly = document.getElementById("descripcion"); 
charly.style.height = "auto"; //alert(charly.outerHTML)
setTimeout(hovering1, 1250)
}

function hovering1(){
eco = charly.offsetHeight; //alert(eco)
charly.removeAttribute("style",false); //alert(charly.outerHTML)
var delta = document.getElementById("bravo").innerHTML; //alert(delta)
delta = delta.replace(/666/g,eco); //alert(delta)
document.getElementById("bravo").innerHTML = delta;
}

onload = hovering0;

</script>
<style type="text/css" id="bravo">

body{background-color:black}

#descripcion{
    background-color:rgba(255,255,255,0.7);
    filter:alpha(opacity=70);
    position:fixed;
    top:100%;
    margin-top:-65px;
    padding:6px;
    height: 75px;
    width:275px;
    overflow:hidden;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-transform: rotate(4deg); 
    -moz-transform: rotate(4deg); 
    -ms-transform: rotate(4deg); 
    -o-transform: rotate(4deg); 
    transform: rotate(4deg); 
}   
 
#descripcion h1{margin-top:10px;font-size:28px;}

#descripcion:hover{ 
    width: 275px; 
    height: 666px; 
    margin-top: -666px; 
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg); 
    -ms-transform: rotate(0deg); 
    -o-transform: rotate(0deg); 
    transform: rotate(0deg); 
    -webkit-transition: all 0.5s ease; 
    -moz-transition: all 0.5s ease; 
    -ms-transition: all 0.5s ease; 
    -o-transition: all 0.5s ease; 
    transition: all 0.5s ease; 
}  
</style>
</head>
<body>

<div id="descripcion">
<h1><b>Título</b></h1>
<div id="metadescription"><h7><i>Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores.</i></h7></div>
</div>
 
</body>
</html>

P.D. : Por favor, quiero el emoticón del chanchito.

yavierre · #7 (**permalink**) 07/07/2012, 21:51

Cita:

Iniciado por furoya

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>AJJJJ.</title>
<script type="text/javascript">

var charly, eco;

function hovering0(){
charly = document.getElementById("descripcion"); 
charly.style.height = "auto"; //alert(charly.outerHTML)
setTimeout(hovering1, 1250)
}

function hovering1(){
eco = charly.offsetHeight; //alert(eco)
charly.removeAttribute("style",false); //alert(charly.outerHTML)
var delta = document.getElementById("bravo").innerHTML; //alert(delta)
delta = delta.replace(/666/g,eco); //alert(delta)
document.getElementById("bravo").innerHTML = delta;
}

onload = hovering0;

...

P.D. : Por favor, quiero el emoticón del chanchito.

Furoya..

GRACIAS.. GRACIAS.. GRACIAS.

Gracias por darte tu tiempo y .. hacer todo ese codigo

FUNCIONÓ PERFECTAMENTE

Cuál emoticón del chanchito? ahora yo te debo un favor

furoya · #8 (**permalink**) 07/07/2012, 22:25

No. De nada, no te preocupes.
Lo del emoticón es un pedido para el Foro, porque de un tiempo para acá estoy reclamando por "íconos de emociones" que no están en la lista.

Y eso que hice ... bueno, funciona, pero es una chanchada. En este momento el equipo de Moderadores de JS está debatiendo si ante semejante afrenta al lenguaje javascript me suspenden por un mes o por un año.

Pero en fin, tengo la disculpa de que fue lo que pediste.

Si me vienen a pegar, tú me defiendes.

Y muchas gracias por la valoración.

Un saludo
furoya.

yavierre · #9 (**permalink**) 07/07/2012, 23:21

La verdad lo vería muy tonto si te suspendiesen del foro aunque sea por un tiempo, ví que estás hace más de 10 años registrado aquí y alegar un poquito no le veo lo.. malo

Si viese alguna discusión entre tú y un moderador .. bueno.. yo te defenderé
Me salvaste de una grande :'D
Y no.. yo soy el que está agradecido

Saludos y.. ojalá terminen agregandole más emoticones a esto

no creo que cueste mucho siendo programadores XD