Das Erstellen von Stilen für Webseiten ist ein wichtiger Schritt bei der Entwicklung von Websites. Die Verwendung von CSS (Cascading Style Sheets) kann jedoch unangenehm sein, insbesondere bei dynamisch generierten Elementen oder der Interaktion mit dem Benutzer über JavaScript. Dann stellt sich die Frage: Wie mache ich CSS in JS?
Es gibt mehrere Ansätze, um dieses Problem zu lösen. Eine davon besteht darin, JavaScript zu verwenden, um die Stile von HTML-Elementen zu erstellen und zu ändern. Jedes Element verfügt über eine style-Eigenschaft, mit der Sie Stile direkt aus JavaScript-Code festlegen können. Dies ist jedoch nicht immer eine effektive Lösung, da der Code mit einer großen Anzahl von Stilen mühsam und schwierig zu pflegen sein kann.
Ein anderer Ansatz besteht darin, Bibliotheken oder Frameworks zu verwenden, mit denen Sie CSS und JavaScript kombinieren können. Ein solches Werkzeug ist CSS-in-JS, mit dem Sie Stile in eine JavaScript-Datei schreiben können, indem Sie die CSS-Syntax verwenden oder sogar eine erweiterte Syntax verwenden, die zusätzliche Funktionen hinzufügt. Dieser Ansatz ermöglicht es, den Code modularer, wiederverwendbarer und wartbarer zu machen.
In diesem Artikel werden wir die verschiedenen Möglichkeiten zum Erstellen von CSS in JS sowie die Vor- und Nachteile von jedem untersuchen. Sie erfahren mehr über die beliebtesten Bibliotheken und Frameworks, die die Entwicklung und Wartung von Code erleichtern, sowie über die Best Practices für die Anwendung von CSS in JS.
Schritt 1. Verbinden von CSS in JS
Mit dem Aufkommen neuer Technologien und Ansätze haben Entwickler begonnen, CSS in JavaScript zu verwenden, um Webanwendungen flexibler und dynamischer zu gestalten.
Eine der ersten Möglichkeiten, CSS in JS zu verbinden, bestand darin, Inline-Stile mit der style-Eigenschaft eines DOM-Objekts zu verwenden. Mit JavaScript können Sie Stile für bestimmte Seitenelemente festlegen, indem Sie Werte für Elementeigenschaften wie background-color , color , font-size und andere festlegen.
Sie können auch JavaScript-Objekte, die CSS-Klassen darstellen, anstelle von Inline-Stilen verwenden, um Elementstile festzulegen. Anstatt dem Objekt die CSS-Eigenschaften direkt zuzuweisen, können wir zunächst ein Klassenobjekt erstellen, das die erforderlichen Stile enthält, und diese Klasse dann auf das Seitenelement anwenden. Auf diese Weise können Sie Stile an verschiedenen Stellen im Code wiederverwenden und ihre Werte leicht ändern.
Die moderne Webanwendungsentwicklung verwendet die JavaScript-Bibliothek React, die es Entwicklern ermöglicht, einen Ansatz zu verwenden, der als "Inline Styles" bezeichnet wird. Bei diesem Ansatz werden CSS-Stile mithilfe einer speziellen Syntax direkt in JavaScript geschrieben, sodass Sie die Stile besser verwalten und basierend auf verschiedenen Bedingungen dynamisch ändern können.
Als Ergebnis erhalten Entwickler dank CSS in JS mehr Flexibilität und Kontrolle über die Stile einer Webanwendung, was eine modernere und effizientere Möglichkeit bietet, Benutzeroberflächen zu erstellen.
Schritt 2. Verwenden von CSS-Eigenschaften in JS
Nachdem wir das CSS in die JS-Datei eingefügt und das Element erstellt haben, ist es an der Zeit, die CSS-Eigenschaften zu verwenden.
In JavaScript können wir die Stile eines Elements mit einer speziellen style-Eigenschaft ändern. Diese Eigenschaft enthält ein Objekt, in dem wir CSS-Eigenschaften für das Element angeben können.
Um beispielsweise die Textfarbe eines Elements zu ändern, können wir den folgenden Code verwenden:
element.style.color = "red";Und um die Schriftgröße zu ändern, können wir Folgendes verwenden:
element.style.fontSize = "20px";Auf diese Weise können wir die CSS-Eigenschaften eines Elements dynamisch mit JavaScript ändern. Dadurch können wir interaktive und animierte Elemente auf einer Webseite erstellen.
Schritt 3. Ändern von Stilen mit JS
Sobald wir mit JavaScript auf ein Element zugegriffen haben, können wir dessen Stile ändern, neue Stile hinzufügen oder vorhandene löschen. Dadurch können wir das Erscheinungsbild der Elemente einer Webseite dynamisch ändern.
Um die Stile in JavaScript zu ändern, verwenden wir die Eigenschaft style das Objekt des Elements. Um beispielsweise die Hintergrundfarbe eines Elements zu ändern, können wir den folgenden Code verwenden:
Und um die Textfarbe eines Elements zu ändern, können wir den folgenden Code verwenden:
Beachten Sie, dass Eigenschaftsnamen in JavaScript normalerweise in geschrieben werden camelCase (zum Beispiel, backgroundColor), während Eigenschaftswerte normalerweise in Anführungszeichen geschrieben werden (zB, "red" oder "blue").
Außerdem können wir die Eigenschaft verwenden classList das Elementobjekt zum Hinzufügen, Entfernen oder Wechseln von Klassen. Zum Beispiel, um eine Klasse hinzuzufügen "highlight" zum Element können wir den folgenden Code verwenden:
Und um die Klasse zu entfernen "highlight" dementsprechend können wir den folgenden Code verwenden:
Wir können auch Methoden verwenden addEventListener und removeEventListener zum Hinzufügen und Entfernen von Ereignishandlern, die bei bestimmten Benutzeraktionen aufgerufen werden (z. B. wenn Sie den Mauszeiger über ein Element bewegen oder auf ein Element klicken).
Als Ergebnis dieser Methoden können wir die Stile der Elemente einer Webseite dynamisch ändern und interaktive Benutzeroberflächen mit CSS und JavaScript erstellen.
