Zusätzlich zur Inline-Stildefinition (d. h. über das Stilattribut hinzugefügt) verfügt der CSS-Stil eines Elements auch über zwei Methoden: in die Seite eingebettetes CSS und extern eingeführtes CSS. In JS können jedoch nur Inline-Stilattribute über el.style.xxx abgerufen werden, was relativ große Einschränkungen aufweist. Glücklicherweise bieten Browser andere Möglichkeiten, auf andere Weise definierte Stilattribute zu erhalten. Im IE gibt es currentStyle, FF und andere W3C-Standardbrowser wie getComputedStyle.
Zur Vereinfachung der Bedienung haben viele aktuelle js-libs dies gekapselt, aber oft müssen wir keine Bibliothek einführen. Alles, was wir brauchen, ist eine getStyle-Funktion, um die aktuelle Stildefinition des Elements zu erhalten. Nachdem ich mir mehrere JS-Lib-Codes angesehen hatte, beschloss ich, eine vereinfachte Version der getStyle-Funktion zu implementieren. Das Ziel dieser Funktion besteht darin, die meisten Anforderungen zu erfüllen, browserübergreifend zu sein, über prägnanten Code und eine hervorragende Leistung zu verfügen. Aufgrund dieser Anforderungen habe ich eine Stunde gebraucht, um es zu erledigen. Ich habe hauptsächlich mehrere Tipps verwendet, z. B. „Eigenschaften des logischen JS-Operators, Code-„Kompilierung“ und sofortige Ausführung von Funktionen. Ich habe es hier für die zukünftige Verwendung geschrieben kann für jeden Freund hilfreich sein, natürlich wäre es besser.
Programmcode
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(''));
}();
//Verwendungsbeispiel:
var el=document.getElementById('test');
getStyle(el,'line-height');
getStyle(el,'color');
getStyle(el,'float');
Von: http://www.ajaxbbs.net/post/webFront/JS-Get-Style-Function.html