Además de la definición de estilo en línea (es decir, agregada a través del atributo de estilo), el estilo CSS de un elemento también tiene dos métodos: css incrustado en la página y css introducido externamente. Sin embargo, en JS, solo se pueden obtener atributos de estilo en línea a través de el.style.xxx, que tiene limitaciones relativamente grandes. Afortunadamente, los navegadores ofrecen otras formas de obtener atributos de estilo definidos de otras maneras. En IE existen currentStyle, FF y otros navegadores estándar del w3c como getComputedStyle.
Para facilitar la operación, muchas js-libs actuales han encapsulado esto, pero muchas veces no necesitamos introducir ninguna biblioteca. Todo lo que necesitamos es una función getStyle para obtener la definición de estilo actual del elemento. Después de consultar varios códigos JS-Lib, decidí implementar una versión simplificada de la función getStyle. El objetivo de esta función es satisfacer la mayoría de las necesidades, ser compatible con todos los navegadores, tener un código conciso y un rendimiento excelente. Según estos requisitos, me tomó una hora hacerlo. Utilicé principalmente varios consejos como "características del operador lógico JS," compilación "de código y ejecución instantánea de funciones. Lo escribí aquí para uso futuro. Puede ser útil para cualquier amigo, por supuesto que sería mejor.
código de programa
var getStyle=función(){
var f=document.defaultView;
devolver nueva Función('el','estilo',[
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"estilo=='flotar' && (estilo='",
f? 'cssFloat': 'estiloFloat',
"');return el.style[estilo] || ",
f ? 'window.getComputedStyle(el, null)[estilo]' : 'el.currentStyle[estilo]',
' || nulo;'].join(''));
}();
//Ejemplo de uso:
var el=document.getElementById('prueba');
getStyle(el,'altura de línea');
getStyle(el,'color');
getStyle(el,'flotar');
De: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html