So legen Sie CSS in Javascript fest

So legen Sie CSS mit JavaScript fest: 1. Legen Sie das Stilobjekt direkt über den Inline-Stil fest. 2. Legen Sie das Stilattribut fest, indem Sie einen globalen Stil hinzufügen. 3. Verwenden Sie JavaScript, um die Klassen „add()“ und „remove(“ hinzuzufügen. )“, um CSS festzulegen.

Die Betriebsumgebung dieses Artikels: Windows7-System, Javascript 1.8.5 und HTML5- und CSS3-Version, Dell G3-Computer.

Javascript legt den CSS-Stil fest

1. Legen Sie das Stilobjekt direkt fest (Inline-Stil)

Der einfachste Weg, den Stil eines Elements mithilfe von JavaScript festzulegen, ist die Verwendung des Stilattributs. 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 Schrift- und Hintergrundfarbe eines 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: Hintergrundfarbe) anstelle von Bindestrichen (Hintergrundfarbe). um Attributnamen darzustellen

Das Stilattribut fügt Stile inline zu einem Element hinzu:

<div id="demo" style="color: purple; background-color: #e5e5e5; height: 150px;">     
     Hello, world! 
</div>

Dies kann jedoch unser Markup sehr verwirrend machen. Auch die Browser-Rendering-Leistung ist schlecht.

2. Legen Sie das Stilattribut fest – fügen Sie einen globalen Stil hinzu.

Eine andere Methode besteht darin, Elemente mit CSS-Attributen in einzufügen. 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 werden wir unseren Stil über innerHTML zu