Wie lege ich den CSS-Stil in JS fest? In diesem Artikel erfahren Sie, wie Sie CSS-Stile mit JS festlegen (ändern). Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Jetzt stellen wir Ihnen vor, wie Sie den CSS-Stil mithilfe von Javascript festlegen.
1. Legen Sie den Stil direkt fest (Inline-Stil)
Der einfachste Weg, den Stil eines Elements mithilfe von JavaScript festzulegen, ist die Verwendung von Stilattribut. Für jedes HTML-Element, auf das wir über JavaScript zugreifen, gibt es ein Style-Objekt. Mit diesem Objekt können wir CSS-Eigenschaften angeben und deren Werte festlegen. Dies ist beispielsweise der Stil zum Festlegen der Schriftfarbe, Hintergrundfarbe und des Stils des HTML-Elements mit dem ID-Wert-Demo:
var myElement = document.querySelector("#demo");
// 把颜色设置成紫色
elem.style.color = 'purple';
// 将背景颜色设置为浅灰色
elem.style.backgroundColor = '#e5e5e5';
// 将高度设置为150 px
elem.style.height = '150px';Hinweis: JavaScript verwendet das Camel-Case-Prinzip ( zum Beispiel: backgroundColor) anstelle von Bindestrich Die Linie (Hintergrundfarbe) stellt den Attributnamen dar
Das Stilattribut fügt Stile inline zum Element hinzu:
<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">
Hello, world!
</div>Dies kann jedoch unser Markup sehr beeinträchtigen verwirrend. Auch die Browser-Rendering-Leistung ist schlecht.
2. Einen globalen Stil hinzufügen
Eine andere Methode besteht darin, hinzuzufügen Fügen Sie Elemente mit CSS-Attributen in das DOM ein. Dies ist nützlich, wenn Sie Stile festlegen, die für eine Gruppe von Elementen gelten und nicht nur für ein einzelnes.
Zuerst erstellen wir ein Stilelement.
var style = document.createElement('style');
Als nächstes fügen wir unseren Stil zu