Javascript: obtener estilos tal cual son mostrados
Existe una forma de obtener los estilos de un elemento del DOM en Javascript tal cual son mostrados por el navegador. Como pasa usualmente, Firefox, Opera, Chrome y Safari lo hacen de una forma e Internet Explorer de otra.
En el blog de Robert Nyman encuentro el siguiente código:
function getStyle(oElm, strCssRule){
var strValue = "";
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm,"")
.getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}
La función getComputedStyle (todos los navegadores menos IE) devuelve un objeto con los todos los estilos que tiene el elemento oElm pasado por parametro.
En el caso de IE, currentStyle tiene los estilos en mayusculas, por lo que es necesaria la conversión a las mismas.
En mi caso, probando en Firefox 3 en Ubuntu, getPropertyValue me devolvía el valor de la propiedad que buscaba vacio. Corroboré que la misma existía y tenía un valor distinto de vacio.
Para solucionarlo, usé el getter de las propiedades del objeto de estilos (reemplazando la línea correspondiente en el código anterior):
str = "strValue = document.defaultView.getComputedStyle(oElm, '')."+strCssRule;
eval(str);
Supongo que esta forma también funciona en versiones anteriores de Firefox.