So formatieren Sie CSS über JavaScript

In der Webentwicklung ist das Festlegen von CSS-Stilen ein sehr häufiger Vorgang. JavaScript kann CSS-Stile über DOM-Operationen festlegen. In diesem Artikel wird erläutert, wie Sie CSS-Stile über JavaScript festlegen.

1. Holen Sie sich das Element und legen Sie den Stil fest

Um den CSS-Stil über JavaScript festzulegen, müssen Sie zuerst das zu formatierende Element abrufen. Es gibt viele Möglichkeiten, es zu erhalten. Am Beispiel des Elements mit der ID „demo“ können Sie den folgenden Code verwenden:

var demo = document.getElementById("demo");

Nachdem Sie das Element erhalten haben, können Sie seinen CSS-Stil über das Stilattribut des Elements festlegen. Um beispielsweise die Hintergrundfarbe eines Elements auf Rot festzulegen, können Sie den folgenden Code verwenden:

demo.style.backgroundColor = "red";

Ebenso können Sie das Stilattribut verwenden, um Größe, Rahmen, Schriftart, Textfarbe usw. des Elements festzulegen. Sie müssen lediglich den Namen des CSS-Stilattributs in den Namen „camelCase“ konvertieren und den Attributwert dem Stilattribut zuweisen. Um beispielsweise die Rahmenbreite eines Elements auf 1 Pixel und die Rahmenfarbe auf Blau festzulegen, können Sie den folgenden Code verwenden:

demo.style.borderWidth = "1px";
demo.style.borderColor = "blue";

2. Verwenden Sie das classList-Objekt, um den Stil festzulegen

Zusätzlich zur Verwendung des style-Attributs des Elements, um den CSS-Stil festzulegen, können Sie auch das classList-Objekt verwenden, um den Stil festzulegen. Das ClassList-Objekt stellt Methoden wie Hinzufügen, Entfernen und Umschalten bereit, um das Klassenattribut des Elements zu bedienen und Funktionen wie Hinzufügen, Löschen und Wechseln von Stilen zu erreichen.

Um beispielsweise eine Klasse mit dem Namen „highlight“ zu einem Element hinzuzufügen, können Sie den folgenden Code verwenden:

demo.classList.add("highlight");

Um die Klasse mit dem Namen „highlight“ zu entfernen, können Sie den folgenden Code verwenden:

demo.classList.remove("highlight");

Um die Klasse zu wechseln Mit dem Namen „highlight“ können Sie den folgenden Code verwenden:

demo.classList.toggle("highlight");

3. Stile über CSSStyleSheet-Objekte festlegen

In JavaScript werden CSS-Stylesheets auch als Objekte dargestellt, nämlich CSSStyleSheet-Objekte. CSS-Stile können auch über das CSSStyleSheet-Objekt festgelegt werden. Um den Stil über das CSSStyleSheet-Objekt festzulegen, müssen Sie zunächst das zu bedienende Stylesheet abrufen. Es gibt viele Möglichkeiten, es zu erhalten. Am Beispiel des Stylesheets mit der ID „styleSheet“ können Sie den folgenden Code verwenden:

var styleSheet = document.getElementById("styleSheet").sheet;

Nachdem Sie das Stylesheet erhalten haben, können Sie mit der Methode insertRule Stilregeln hinzufügen Stylesheet. Um beispielsweise eine neue Stilregel zum Stylesheet hinzuzufügen, um die Hintergrundfarbe des Elements grün zu machen, können Sie den folgenden Code verwenden:

styleSheet.insertRule("#demo {background-color: green;}", 0);

Beachten Sie, dass der zweite Parameter hier die Position angibt, an der die Stilregel eingefügt wird, 0 zeigt an, dass es am Anfang in das Stylesheet eingefügt wird, -1 zeigt an, dass es am Ende des Stylesheets eingefügt wird.

Zusätzlich zum Einfügen von Stilregeln bietet das CSSStyleSheet-Objekt auch die Methode deleteRule zum Löschen von Stilregeln. Um beispielsweise die erste Stilregel im Stylesheet zu löschen, können Sie den folgenden Code verwenden:

styleSheet.deleteRule(0);

IV Zusammenfassung

Durch die obige Einführung können wir verstehen, wie CSS-Stile über JavaScript bedient werden, einschließlich der Verwendung des Stilattributs und classList von Elementen. Natürlich ist dies nur die Spitze des Eisbergs, wenn es um JavaScript-Stil geht. Es gibt viele fortgeschrittene Anwendungen und Techniken, die wir beherrschen und erlernen müssen.

Das obige ist der detaillierte Inhalt vonSo formatieren Sie CSS über JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!