recoger la altura de un div dado por css

chefnelone · #1 (**permalink**) 26/06/2008, 06:02

hola
tengo un div con id="content" que tiene style:

#content{
height: 700px;
}

necesito recoger ese valor y cambiarlo con js

he probado esto

<script type="text/javascript" >
a= getElementById("content").style.height;
alert("a");
getElementById("content").style.height=1000px;
</script>

como puedo hacerlo

gracias

Panino5001 · #2 (**permalink**) 26/06/2008, 06:05

Probá con

Código PHP:

  document.getElementById('iddelacapa').offsetHeight;

chefnelone · #3 (**permalink**) 26/06/2008, 07:12

Cita:

Iniciado por Panino5001

Probá con

Código PHP:

  document.getElementById('iddelacapa').offsetHeight;

creo que funciona a medias.
obtengo un valor pero no el height que .content tiene en el codigo css.

ademas luego necesito cambiar la altura de ese div y:
document.getElementById('content').offsetHeight = "700";
o
document.getElementById('content').offsetHeight = 700;

no han funcionado

alguna idea

Panino5001 · #4 (**permalink**) 26/06/2008, 08:25

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style>
#content{
height: 700px;
}
</style>
</head>

<body>
<div id="content">Colocar aqu&#237; el contenido de la nueva etiqueta Div</div>
<script>
alert(document.getElementById('content').style.height);//retorna nada
alert(document.getElementById('content').offsetHeight);//retorna 700
document.getElementById('content').style.height=document.getElementById('content').offsetHeight-300+'px';
alert(document.getElementById('content').style.height);//retorna 400px
alert(document.getElementById('content').offsetHeight);//retorna 400
</script>
</body>
</html>

derkenuke · #5 (**permalink**) 26/06/2008, 08:26

Hola chefnelone:

A mi me da 700 sin problemas en IE y en FF:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

<title>Página nueva</title>

<style type="text/css">

#content{

    height: 700px;

}

</style>

 
</head>

 
<body>

 
<div id="content">asd</div>

 
<script type="text/javascript">

<!--

 
alert( document.getElementById("content").offsetHeight );

 
// -->

</script>

 
</body>

</html>

¿Hay algo más dentro de la capa o fuera o...?

Si quieres ser más rebuscado puedes copiarle a prototype su manera de obtener las dimensiones (más o menos):

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">

<head>

<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />

<meta name="Author" content="derkeNuke" />

<title>Página nueva</title>

<style type="text/css">

#content{

    height: 700px;

}

</style>

</head>

 
<body>

 
 
<div id="content">asd</div>

 
 
<script type="text/javascript">

<!--

 
 
var getDimensions = function(element) {

    element = document.getElementById(element);

    var display = element.style.display;

    if (display != 'none' && display != null) // Safari bug

      return {width: element.offsetWidth, height: element.offsetHeight};

 
    // All *Width and *Height properties give 0 on elements with display none,

    // so enable the element temporarily

    var els = element.style;

    var originalVisibility = els.visibility;

    var originalPosition = els.position;

    var originalDisplay = els.display;

    els.visibility = 'hidden';

    els.position = 'absolute';

    els.display = 'block';

    var originalWidth = element.clientWidth;

    var originalHeight = element.clientHeight;

    els.display = originalDisplay;

    els.position = originalPosition;

    els.visibility = originalVisibility;

    return {width: originalWidth, height: originalHeight};

};

 
alert( getDimensions('content').height );

 
// -->

</script>

 
</body>

</html>

O incluso recogerlas desde CSS y cambiarlas.

Saludos

chefnelone · #6 (**permalink**) 26/06/2008, 08:30

Me explico un poco más por si alguien tiene alguan idea mejor que la que estoy buscando
lo que realmente necesito hacer es chequear si un div tiene una altura determinada y sino darle una altura

algo como:
si el div con id="content" no tiene una altura mayor a 500px entonces le doy altura 500px

Panino5001 · #7 (**permalink**) 26/06/2008, 08:57

Creo que tu problema es de css, no de javascript. No obstante, se comprueba como te dijimos:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title></title>

<style>

#content{

height: 500px;

}

</style>

<script>

window.onload=function(){

if(document.getElementById('content').offsetHeight>500)

    document.getElementById('content').style.height='500px';

    document.getElementById('content').style.overflow='auto';

}

</script>

</head>

 
<body>

<div id="content">

  <p>Lorem Ipsum is simply dummy text of the printing and<br />

    typesetting industry. Lorem Ipsum has been the industry's standard dummy text<br />

    ever since the 1500s, when an unknown printer took a galley of type and scrambled<br />

    it to make a type specimen book. It has survived not only five centuries, but<br />

    also the leap into electronic typesetting, remaining essentially unchanged.<br />

    It was popularised in the 1960s with the release of Letraset sheets containing<br />

    Lorem Ipsum passages, and more recently with desktop publishing software like<br />

    Aldus PageMaker including versions of Lorem Ipsum. Why do we use it? It is<br />

    a long established fact that a reader will be distracted by the readable content<br />

    of a page when looking at its layout. The point of using Lorem Ipsum is that<br />

    it has a more-or-less normal distribution of letters, as opposed to using 'Content<br />

    here, content here', making it look like readable English. Many desktop publishing<br />

    packages and web page editors now use Lorem Ipsum as their default model text,<br />

    and a search for 'lorem ipsum' will uncover many web sites still in their infancy.<br />

    Various versions have evolved over the years, sometimes by accident, sometimes<br />

    on purpose (injected humour and the like).Lorem Ipsum is simply dummy text<br />

    of the printing and typesetting industry. Lorem Ipsum has been the industry's<br />

    standard dummy text ever since the 1500s, when an unknown printer took a galley<br />

    of type and scrambled it to make a type specimen book. It has survived not<br />

    only five centuries, but also the leap into electronic typesetting, remaining<br />

    essentially unchanged. It was popularised in the 1960s with the release of<br />

    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop<br />

    publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br />

    Why do we use it? It is a long established fact that a reader will be distracted<br />

    by the readable content of a page when looking at its layout. The point of<br />

    using Lorem Ipsum is that it has a more-or-less normal distribution of letters,<br />

    as opposed to using 'Content here, content here', making it look like readable<br />

    English. Many desktop publishing packages and web page editors now use Lorem<br />

    Ipsum as their default model text, and a search for 'lorem ipsum' will uncover<br />

    many web sites still in their infancy. Various versions have evolved over the<br />

    years, sometimes by accident, sometimes on purpose (injected humour and the<br />

    like).Lorem Ipsum is simply dummy text of the printing and typesetting industry.<br />

    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,<br />

    when an unknown printer took a galley of type and scrambled it to make a type<br />

    specimen book. It has survived not only five centuries, but also the leap into<br />

    electronic typesetting, remaining essentially unchanged. It was popularised<br />

    in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br />

    and more recently with desktop publishing software like Aldus PageMaker including<br />

    versions of Lorem Ipsum. Why do we use it? It is a long established fact that<br />

    a reader will be distracted by the readable content of a page when looking<br />

    at its layout. The point of using Lorem Ipsum is that it has a more-or-less<br />

    normal distribution of letters, as opposed to using 'Content here, content<br />

    here', making it look like readable English. Many desktop publishing packages<br />

    and web page editors now use Lorem Ipsum as their default model text, and a<br />

    search for 'lorem ipsum' will uncover many web sites still in their infancy.<br />

    Various versions have evolved over the years, sometimes by accident, sometimes<br />

    on purpose (injected humour and the like).Lorem Ipsum is simply dummy text<br />

    of the printing and typesetting industry. Lorem Ipsum has been the industry's<br />

    standard dummy text ever since the 1500s, when an unknown printer took a galley<br />

    of type and scrambled it to make a type specimen book. It has survived not<br />

    only five centuries, but also the leap into electronic typesetting, remaining<br />

    essentially unchanged. It was popularised in the 1960s with the release of<br />

    Letraset sheets containing Lorem Ipsum passages, and more recently with desktop<br />

    publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br />

    Why do we use it? It is a long established fact that a reader will be distracted<br />

    by the readable content of a page when looking at its layout. The point of<br />

    using Lorem Ipsum is that it has a more-or-less normal distribution of letters,<br />

    as opposed to using 'Content here, content here', making it look like readable<br />

    English. Many desktop publishing packages and web page editors now use Lorem<br />

    Ipsum as their default model text, and a search for 'lorem ipsum' will uncover<br />

    many web sites still in their infancy. Various versions have evolved over the<br />

    years, sometimes by accident, sometimes on purpose</p>

</div>

</body>

</html>

derkenuke · #8 (**permalink**) 26/06/2008, 09:01

¿Ninguna de mis opciones te dio resultado?
Buf, no se me ocurre mucho más que decirte...

chefnelone · #9 (**permalink**) 26/06/2008, 09:45

los codigo que me has pasado funcionan perfecto.
debe de haber algo en mi codigo que está mal.
ahora solo es checkear y ver donde tengo el error

gracias a todos