Ver Tema

yarboblo · 2011-09-12 17:55 @788

Hola, en el siguiente programa me aparece la ventana de alert() pero me sale vacía en lugar de indicar el dato que le pido (height). ¿Alguien puede echarme un cable?

HTML:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<title></title>
 
<link rel="stylesheet" href="estilo.css" type="text/css" media="screen"></link>
<script type="text/javascript" src="biblioteca.js"></script>
 
</head>
 
<body>
 
<div id="bloqcent">
 
<ul id="departamentos">
<li id="departienda">TIENDA</li>
<li id="deparreparaciones">REPARACIONES</li>
</ul>
 
<div id="cuerpo">cuerpo
<div id="tienda" name="hola"></div>
<div id="reparaciones"></div>
</div>
</div>
 
</body>
</html>

CSS:

Syntax: [ Download ] [ Hide ]

Using html4strict Syntax Highlighting

#bloqcent{float:left;
width:70%;
}
 
 
#departamentos li{float:left;
width:20%;
height:25px;
text-align:center;
margin-right:1%;}
 
#cuerpo{clear:left;
border:1px solid black;
height:300px;}
 
#tienda{height:100px;background-color:orange;display:block;}
#reparaciones{height:100px;background-color:blue;display:block;}
 

JS:

Syntax: [ Download ] [ Hide ]

Using javascript Syntax Highlighting

function cambiardepar()
{
var nombre=document.getElementById("tienda");
alert(nombre.style.height);
}
 
window.onload = function()
{ 
document.getElementById("departienda").onclick = cambiardepar;
document.getElementById("deparreparaciones").onclick =cambiardepar;
}

En este otro caso veo que me funciona la cosa utilizando getElementById() pero no usando getElementsByName(). ¿Qué estoy haciendo mal?

(El HTML y CSS son los mismos que los anteriores)

JS (sí funciona):

Syntax: [ Download ] [ Hide ]

Using javascript Syntax Highlighting

function cambiardepar()
{
document.getElementById("tienda").style.display="none";
}
 
window.onload = function()
{ 
document.getElementById("departienda").onclick = cambiardepar;
document.getElementById("deparreparaciones").onclick =cambiardepar;
}
 

JS (no funciona):

Syntax: [ Download ] [ Hide ]

Using javascript Syntax Highlighting

function cambiardepar()
{
document.getElementsByName("hola").style.display=" none";
}
 
window.onload = function()
{ 
document.getElementById("departienda").onclick = cambiardepar;
document.getElementById("deparreparaciones").onclick =cambiardepar;
}

A ver si alguien puede sacarme de dudas. Gracias.

explorer · 2011-09-13 07:10 @340

El problema es que .style se refiere al estilo que tiene el objeto, pero NO al estilo heredado del CSS.

Hay que hacer otra cosa para acceder a los estilos CSS.

El siguiente código sí que me funciona en Firefox:

Syntax: [ Download ] [ Hide ]

Using javascript Syntax Highlighting

function cambiardepar()
{
  var mysheet = document.styleSheets[0];                // Accedemos a la primera hoja de estilos CSS
  for (i=0; i<mysheet.cssRules.length; i++) {           // Buscamos por todas sus reglas
    if (mysheet.cssRules[i].selectorText == "#tienda"){ // Busca la regla que se llama "#tienda"
      tienda_css = mysheet.cssRules[i];                 // Accedemos al objeto que guarda los estilos de '#tienda'
      break;
    }
  }
 
alert("Altura: " + tienda_css.style.height);            // Del objeto, accedemos a la propiedad 'height'
}
 

Más información aquí y aquí.

Atención, que en Explorer se accede con rules[]. Mira el segundo enlace.

yarboblo · 2011-09-13 07:31 @354

Gracias explorer, pero no lo entiendo.
Height no es un estilo heredado de un elemento padre, está definido directamente como atributo de "tienda". Además, ¿por qué sí puedo acceder a cambiarle "display" y no a "height"??

explorer · 2011-09-13 07:55 @371

Humm... pues, la verdad, no lo sé...

Publicidad

Socializa