Wie fügt Sie CSS mit JavaScript hinzu

Es gibt verschiedene Szenarien, in denen Programmierer die Seite mit JavaScript stylen müssen. Zum Beispiel dynamisch verändern Sie den Stil der Elemente der Benutzerinteraktionen, einschließlich der Anzeige verschiedener Animationen oder Stile zum Fokus oder der Schwebe auf einem beliebigen Text usw. Für das dynamische Styling ist die Verwendung des CSS -Stylings in JavaScript effizienter. Es bietet eine flexible und dynamische Möglichkeit, Stile zu verwalten und Anwendungen benutzerfreundlicher zu gestalten.

In diesem Artikel werden die Methoden zum Hinzufügen von CSS mit JavaScript beschrieben.

So fügen Sie CSS mit JavaScript hinzu?

In JavaScript können Sie einem Element CSS -Stile hinzufügen, indem Sie seine Style -Eigenschaft anhand der folgenden Methoden oder Ansätze ändern:

• Style -Immobilie als Inline -Styling
• setAttribute () Methode als Inline -Styling
• CreateLement () -Methode als globales Styling

Methode 1: Fügen Sie CSS mit JavaScript mit der Eigenschaft "Stil" hinzu

Verwenden Sie zum Hinzufügen von CSS in JavaScript die “Stil" Eigentum. Es wird verwendet, um auf die Inline -Stile eines Elements zuzugreifen und zu manipulieren. Es gibt ein Objekt, das die Inline -Stile eines Elements darstellt und es einem einzelnen Stileigenschaften erwerben oder festlegen kann oder festgelegt wird.

Syntax
Für das Hinzufügen von CSS -Stil in JavaScript wird die folgende Syntax für die “verwendetStil" Eigentum:

Element.Stil;

Hier, "ElementIst ein Verweis auf ein HTML -Element.

Beispiel
Im folgenden Beispiel werden wir die Schaltflächen mit JavaScript stylen. Erstens erstellen wir drei Schaltflächen und weisen ihnen IDs zu, um auf die Button -Elemente für das Styling zuzugreifen:

Zustimmen
Ablehnen
Akzeptieren

Vor dem Styling sieht der Ausgang so aus:

Lassen Sie uns nun diese Schaltflächen in JavaScript mit dem "stylenStil" Eigentum. Holen Sie sich zunächst alle Tastenelemente mithilfe der zugewiesenen IDs mit Hilfe des “GetElementById ()" Methode:

sei einverstanden = dokument.GetElementById ("Btn1");
lass ablehnen = dokument.GetElementById ("Btn2");
Lassen Sie Akzeptieren = Dokument.GetElementById ("Btn3");

Stellen Sie die Hintergrundfarben all dieser Schaltflächen mit der “einStil" Eigentum:

zustimmen.Stil.HintergrundColor = "Green";
ablehnen.Stil.HintergrundColor = "rot";
akzeptieren.Stil.HintergrundColor = "Yellow";

Wie Sie sehen können, wurden die Schaltflächen erfolgreich mit dem "Stil" Eigentum:

Methode 2: Fügen Sie CSS mit JavaScript mit "setAttribute ()" -Methode hinzu

Verwenden Sie das „CSS -Styling in JavaScript, um das“ zu verwendensetAttribute ()" Methode. Es wird verwendet, um ein Attribut und seinen Wert zu einem HTML -Element zu setzen oder hinzuzufügen.

Syntax
Die folgende Syntax wird für die verwendetsetAttribute ()" Methode:

Element.setAttribute (Attribut, Wert);

Beispiel
Hier setzen wir die verschiedenen Stile auf den Schaltflächen in JavaScript mit der "setAttribute ()" Methode. Stellen Sie den Randradius aller Tasten auf “ein“.5rem”, Und die Textfarbe der“Zustimmen" Und "AblehnenSchaltflächen zu “Weiss”.

zustimmen.SetAttribute ("Stil", "Hintergrundfarbe: Grün; Farbe: Weiß; Border-Radius: .5rem; ");
ablehnen.SetAttribute ("Stil", "Hintergrundfarbe: Rot; Farbe: Weiß; Border-Radius: .5rem; ");
akzeptieren.SetAttribute ("Stil", "Hintergrundfarbe: Gelb; Border-Radius: .5rem; ");

Ausgang

Methode 3: Fügen Sie CSS mit JavaScript mit der Methode "CreateLement ()" hinzu

Wenn Sie Klassen oder IDs im JavaScript -Styling wie im CSS -Styling erstellen möchten, verwenden Sie die “CreateLement ()" Methode. Es wird verwendet, um ein neues Element dynamisch zu erstellen. Zum Styling erstellen eine “StilElement mit dieser Methode. Der "CreateLement ('Stil')Die Methode in JavaScript wird verwendet, um ein neues Stilelement dynamisch zu erstellen, mit dem CSS -Stile zu einer Webseite hinzugefügt werden können.

Syntax
Die angegebene Syntax wird für die „verwendet“CreateLement ()" Methode:

dokumentieren.createLement (elementtype);

Verwenden Sie die angegebene Syntax zum Hinzufügen von CSS -Stil in JavaScript:

const style = document.CreateLement ('Stil');

Gehen Sie dann das Stilelement im Kopf -Tag mit der folgenden Syntax an:

dokumentieren.Kopf.appendChild (Stil);

Hier, "Stil”Ist ein Verweis auf das neu erstellte Stilelement und“dokumentieren.KopfIst das Kopfelement des HTML -Dokuments.

Beispiel
Erstellen Sie zunächst ein Stilelement mit der “CreateLement ()" Methode:

var style = document.CreateLement ('Stil');

Erstellen Sie jetzt eine “Btn"Klasse zum Anwenden des gleichen Stylings auf allen Schaltflächen und IDs"btn1","BTN2" Und "Btn3”Für das individuelle Button -Styling:

Stil.Innerhtml = '
.btn
Schriftgröße: 1.1rem;
Polsterung: 3px;
Rand: 2px;
Schriftfamilie: Sans-Serif;
Grenzradius: .5rem;

#btn1
Hintergrundfarbe: Grün;
Farbe weiß;

#Btn2
Hintergrundfarbe: Rot;
Farbe weiß;

#btn3
Hintergrundfarbe: Gelb;

';

Gehen Sie nun das Stilelement an den Kopf des Dokuments an, indem Sie als Parameter an die “übergebenappendChild ()" Methode:

dokumentieren.Kopf.appendChild (Stil);

Ausgang

Es geht darum, CSS in JavaScript hinzuzufügen.

Abschluss

Verwenden Sie zum Hinzufügen von CSS mit JavaScript das Inline -Styling einschließlich der “StilEigentum und “setAttribute ()Methode oder das globale Styling mit der “CreateLement ()" Methode. Das globale Styling ist effizienter, während eine Inline -Methode nicht empfohlen wird, da es schwierig ist, die Anwendungsstile aufrechtzuerhalten und zu Code -Wiederholungen führen kann. In diesem Artikel wurden die Methoden zum Hinzufügen von CSS mit JavaScript beschrieben.