In addition to inline (that is, added through the style attribute) style definition, the CSS style of an element also has two methods: css embedded in the page and css introduced externally. However, in JS, only inline style attributes can be obtained through el.style.xxx, which has relatively large limitations. Fortunately, browsers provide other ways to obtain style attributes defined in other ways. In IE there are currentStyle, FF and other w3c standard browsers such as getComputedStyle.
For ease of operation, many current js-libs have encapsulated this, but many times we do not need to introduce any lib. All we need is a getStyle function to obtain the current style definition of the element. After referring to several JS-Lib codes, I decided to implement a simplified version of the getStyle function. The goal of this function is to meet most needs, be cross-browser, have concise code, and have excellent performance. Based on these requirements, it took me an hour to get it done. I mainly used several tips such as "JS logical operator characteristics, code "compilation", and instant execution of functions. I wrote it here for future use. , if it can be helpful to any friend, of course it would be better.
program code
var getStyle=function(){
var f=document.defaultView;
return new Function('el','style',[
"style.indexOf('-')>-1 && (style=style.replace(/-( \w)/g,function(m,a){return a.toUpperCase()}));",
"style=='float' && (style='",
f ? 'cssFloat' : 'styleFloat',
"');return el.style[style] || ",
f ? 'window.getComputedStyle(el, null)[style]' : 'el.currentStyle[style]',
' || null;'].join(''));
}();
//Usage example:
var el=document.getElementById('test');
getStyle(el,'line-height');
getStyle(el,'color');
getStyle(el,'float');
From: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html