Comunidad de diseño web y desarrollo en internet online

No consigo leer el estilo css REAL de un elemento HTML

Citar            
MensajeEscrito el 23 Feb 2012 08:10 pm
Hola de nuevo!

Estoy intentando leer el estilo de un elemento, en concreto si el elemento en un momento dado esta en display:none o en display:block

El elemento en principio es un div que esta en none dado por estilos desde el mismo elemento directamente, sin hoja de estilos.
En un momento dado por un evento de javascript se cambia a block.
La cuestion es que siempre me lo lee en none incluso cuando el elemento esta en block, pq se ve y pq con firebug me lo indica ¿hay alguna manera de leer el estilo real de ese momento del elemento o solo puedo leer el estilo por defecto aunque este haya sido modificado?

esta es la función de testeo que cargo segundos después(para asegurarme que ya ha cambiado) de que el elemento se haya puesto en block:

Código Javascript :

function ini_slide(){ 
var portafolio = document.getElementById("sec_porta")
if (portafolio.style.display == "block"){
    alert('esta display block si o si!!!!');
    $('#slideshowHolder').jqFancyTransitions({ width: 600, height: 300 });
 }
 if (portafolio.style.display == "none"){
 alert('esta display none si o si');
 }
}


Y siempre me dice el alert que esta none y me hace el segundo if...aun cuando veo que esta en block

Por Sergi0

42 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Feb 2012 08:22 am
El problema es que al utilizar la propiedad style sólo te dará el valor correcto si asignáste el css en el elemento. Algo como:

Código HTML :

<div id="element" style="display:none;"></div>


Allí no habría ningun problema, puede ser una solución asignarle el estilo de esa forma, tu código funcionaría. De otra manera tendrás que recurrir a la siguiente alternativa..

Existen alternativas para obtener el estilo de los elementos, una manera más correcta de trabajar con estilos en javascript que sería con getComputedStyle del objeto window en los navegadores "normales" y con currentStyle en Internet Explorer.

Ya que como acabo de decir, los navegadores presentan incompatibilidades de código deberíamos crear una función que nos ayude en esta tarea..

Código Javascript :

Object.prototype.estilo = function(val)
   {
    if(this.currentStyle)
     { return this.currentStyle[val] }
    else
     { return window.getComputedStyle(this).getPropertyValue(val); }
   }


Para usarla así

Código Javascript :

var elemento = document.getElementById("tuId");
var estilo =  elemento.estilo("display"); 


Tu código quedaría así

Código Javascript :

Object.prototype.estilo = function(val)
   {
    if(this.currentStyle)
     { return this.currentStyle[val] }
    else
     { return window.getComputedStyle(this).getPropertyValue(val); }
   }

function ini_slide(){ 
   var portafolio = document.getElementById("sec_porta")
   if (portafolio.estilo("display") == "block"){
    alert('esta display block si o si!!!!');
    $('#slideshowHolder').jqFancyTransitions({ width: 600, height: 300 });
    }
    if (portafolio.estilo("display") == "none"){
   alert('esta display none si o si');
   }
}


Try It!

Por ivanfc0o

Claber

391 de clabLevel

3 tutoriales

Genero:Masculino  

Hardcore UI

chrome
Citar            
MensajeEscrito el 25 Feb 2012 11:24 am
Muchas gracias por la respuesta, lo probare aunque soy muy beginner en javascript y esto creo que me supera, pero intentare comprenderlo a ver si lo consigo! ;)

Un saludo y gracias!

Por Sergi0

42 de clabLevel



 

firefox

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.