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