Ersetzen des gesamten Style-Attributs (CSSStyleDeclaration) auf einem Element im DOM

Question

Ich weiß, dass um einen einzelnen Stil zu ersetzen, sieht der Code ungefähr so aus:

myDOMElement.style.height = '400px';

Aber was ist, wenn ich den gesamten Style-Objekt auf einen Schlag komplett ersetzen möchte, um die Dinge zu beschleunigen und Neuzeichnungen zu vermeiden? Zum Beispiel würde ich gerne dies tun:

//Hol dir den berechneten Style
var computedStyle = window.getComputedStyle(myDOMElement);

//Ändere ein paar Dinge in dieser CSSStyleDeclaration ohne Neuzeichnen
computedStyle.height = '10px';
computedStyle.width = '20px';
computedStyle.whatever = 'etwas';

//Wende den gesamten computedStyle auf das DOM-Element an, um nur einmal neu zu zeichnen
myDOMElement.style = computedStyle;

Jedoch, wenn ich diesen Code ausführe, wird mein neuer Stil einfach ignoriert. Was kann ich tun, um das zu beheben?

Answer 1

Sie möchten wirklich nicht getComputedStyle("myElement") verwenden, da Versionen von IE dies nicht unterstützen.

Sie können direkt an das style-Attribut anhängen.

var myStyle = "color: #090";
document.getElementById("myElement").style.cssText += '; ' + myStyle; // zum Anhängen
document.getElementById("myElement").style.cssText = myStyle; // zum Ersetzen

myStyle kann viele CSS-Regeln enthalten, so dass Sie alle in einem Neuzeichnen erhalten. Als Bonus erhalten Sie den hinzugefügten CSS-Spezifitätswert eines Inline-Stils, der alles andere außer "!important" überschreiben wird.