No consigo leer el estilo css REAL de un elemento HTML

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

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!

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!