Código HTML :
<style type="text/css"> .imgmarco { display: none; } </style> ... <div id="inmarco" class="inmarco"> <div class="imgmarco" id="slide1"> <img id="wrapimg" src="imagen1.jpg"> </div> <div class="imgmarco" id="slide2"> <img id="wrapimg" src="imagen2.jpg"> </div> </div> <button onclick="Mostrar('slide1')">Mostrar</button>
Como verán hay un div que contiene otros div, pero los divs contenidos no son visibles.
Supongamos que, por cualquier medio que se ajuste, quisiera mostrar un div o el otro usando su id como referencia:
Código Javascript :
function Mostrar(id) { var d = document.getElementById(id); d.style = "display: block"; // atención a esta línea }
Cargo la página en el Opera 10.10, perfecto.
Cargo la página en el IE 8 ... error...
Cargo la página en el FF 3.5.6 ... error...
Cargo la página en Chrome 3.0.195.38 ... error ...
Cargo la página en Safari 4.0.4 ... sí, adivinaron... error...
El error está en la línea comentada. ¿Por qué?.
Luego cambié la línea en cuestión usando esta sintaxis:
Código Javascript :
d.style.display = "block";
Y todo marchó bien en todos los navegadores, incluyendo el Opera.
Pero me tiene desconcertado. He buscado de arriba a abajo en la Web (mi principal referencia es w3schools.com) pero no encontré nada que diga que la forma d.style = "display: block"; esté mal, sin embargo al único que "le gusta" esta forma es a Opera... ¿Alguien podría decirme cuál es lo correcto según el estandar?.
Por supuesto, esto lo solucioné usando la segunda forma mostrada aquí.