Dieser Artikel beschreibt die Methoden zum Hinzufügen von CSS mit JavaScript.
Wie füge ich CSS mit JavaScript hinzu?
In JavaScript können Sie einem Element CSS-Stile hinzufügen, indem Sie seine Stileigenschaft mit den folgenden Methoden oder Ansätzen ändern:
- style-Eigenschaft als Inline-Styling
- setAttribute() Methode als Inline-Styling
- createElement() Methode als globales Styling
Methode 1: Fügen Sie CSS mit JavaScript hinzu, indem Sie die Eigenschaft „style“ verwenden
Verwenden Sie zum Hinzufügen von CSS in JavaScript das „ Stil ' Eigentum. Es wird verwendet, um auf die Inline-Stile eines Elements zuzugreifen und diese zu bearbeiten. Es gibt ein Objekt, das die Inline-Stile eines Elements darstellt und es einem ermöglicht, individuelle Stileigenschaften zu erhalten oder festzulegen.
Syntax
Zum Hinzufügen des CSS-Stils in JavaScript wird die folgende Syntax für das „ Stil ' Eigentum:
Element. Stil ;
Hier, ' Element “ ist ein Verweis auf ein HTML-Element.
Beispiel
Im folgenden Beispiel gestalten wir die Schaltflächen mit JavaScript. Zunächst erstellen wir drei Schaltflächen und weisen ihnen IDs zu, die den Zugriff auf die Schaltflächenelemente für das Styling erleichtern:
< Schaltflächen-ID = 'btn2' > Ablehnen Taste >
< Schaltflächen-ID = 'btn3' > Akzeptieren Taste >
Vor dem Stylen sieht die Ausgabe so aus:
Lassen Sie uns nun diese Schaltflächen in JavaScript mit dem „ Stil ' Eigentum. Rufen Sie zuerst alle Schaltflächenelemente mit ihren zugewiesenen IDs mit Hilfe des „ getElementById() ' Methode:
lass zustimmen = dokumentieren. getElementById ( 'btn1' ) ;ablehnen lassen = dokumentieren. getElementById ( 'btn2' ) ;
annehmen lassen = dokumentieren. getElementById ( 'btn3' ) ;
Stellen Sie die Hintergrundfarben all dieser Schaltflächen mit dem „ Stil ' Eigentum:
zustimmen. Stil . Hintergrundfarbe = 'Grün' ;ablehnen. Stil . Hintergrundfarbe = 'Rot' ;
akzeptieren. Stil . Hintergrundfarbe = 'Gelb' ;
Wie Sie sehen können, wurden die Schaltflächen erfolgreich mit dem „ Stil ' Eigentum:
Methode 2: Fügen Sie CSS mit JavaScript mit der Methode „setAttribute()“ hinzu
Um CSS-Stile in JavaScript hinzuzufügen, verwenden Sie das „ setAttribute() ' Methode. Es wird verwendet, um ein Attribut und seinen Wert zu einem HTML-Element festzulegen oder hinzuzufügen.
Syntax
Die folgende Syntax wird für die „ setAttribute() ' Methode:
Beispiel
Hier werden wir die verschiedenen Stile auf den Schaltflächen in JavaScript mit dem „ setAttribute() ' Methode. Stellen Sie den Randradius aller Schaltflächen auf „ .5 Rest “ und die Textfarbe des „ Zustimmen ' Und ' Ablehnen „Tasten zu“ Weiss “.
ablehnen. setAttribut ( 'Stil' , 'Hintergrundfarbe: rot; Farbe: weiß; Rahmenradius: .5rem;' ) ;
akzeptieren. setAttribut ( 'Stil' , 'Hintergrundfarbe: gelb; Randradius: .5rem;' ) ;
Ausgang
Methode 3: Fügen Sie CSS mit JavaScript mit der Methode „createElement()“ hinzu
Wenn Sie Klassen oder IDs im JavaScript-Stil wie im CSS-Stil erstellen möchten, verwenden Sie das „ createElement() ' Methode. Es wird verwendet, um dynamisch ein neues Element zu erstellen. Erstellen Sie für das Styling ein „ Stil ”-Element mit dieser Methode. Der ' createElement('Stil') ”-Methode in JavaScript wird verwendet, um dynamisch ein neues Stilelement zu erstellen, das zum Hinzufügen von CSS-Stilen zu einer Webseite verwendet werden kann.
Syntax
Die angegebene Syntax wird für die „ createElement() ' Methode:
Verwenden Sie zum Hinzufügen des CSS-Stils in JavaScript die angegebene Syntax:
konst Stil = dokumentieren. createElement ( 'Stil' ) ;Hängen Sie dann das style-Element mit der folgenden Syntax an das Head-Tag an:
dokumentieren. Kopf . Kind anhängen ( Stil ) ;Hier, ' Stil “ ist ein Verweis auf das neu erstellte Stilelement und „ document.head “ ist das Head-Element des HTML-Dokuments.
Beispiel
Erstellen Sie zunächst ein Stilelement mit dem „ createElement() ' Methode:
Erstellen Sie nun ein „ btn „Klasse zum Anwenden des gleichen Stils auf alle Schaltflächen und IDs“ btn1 “, „ btn2 ' Und ' btn3 “ für individuelles Button-Styling:
Stil. innerHTML = `. btn {
Schriftart - Größe : 1,1 rem ;
Polsterung : 3px ;
Rand : 2px ;
Schriftart - Familie : ohne - Serife ;
Grenze - Radius : .5 Rest ;
}
#btn1 {
Hintergrund - Farbe : Grün ;
Farbe : Weiss ;
}
#btn2 {
Hintergrund - Farbe : Rot ;
Farbe : Weiss ;
}
#btn3 {
Hintergrund - Farbe : Gelb ;
}
` ;
Hängen Sie nun das Stilelement an den Kopf des Dokuments an, indem Sie es als Parameter an „ appendChild() ' Methode:
dokumentieren. Kopf . Kind anhängen ( Stil ) ; Ausgang
Das ist alles über das Hinzufügen von CSS in JavaScript.
Abschluss
Verwenden Sie zum Hinzufügen von CSS mit JavaScript das Inline-Styling einschließlich des „ Stil „Eigentum“ und „ setAttribute() “-Methode oder das globale Styling mit der „ createElement() ' Methode. Globales Styling ist effizienter, während eine Inline-Methode nicht empfohlen wird, da es die Pflege der Anwendungsstile erschwert und zu Codewiederholungen führen kann. In diesem Artikel wurden die Methoden zum Hinzufügen von CSS mit JavaScript beschrieben.