So ändern Sie CSS in Javascript

In der Webentwicklung müssen wir häufig CSS-Stile über JavaScript ändern und die Elementstile auf Webseiten dynamisch ändern, um ein besseres Benutzerinteraktionserlebnis zu erzielen. In diesem Artikel wird vorgestellt, wie JavaScript CSS ändert, einschließlich der folgenden Aspekte:

1. Elementstil ändern
2. Stylesheet dynamisch hinzufügen
3. Get Stil berechnen
4. Klassennamen ändern

1. Elementstil ändern

Um den Stil eines Elements zu ändern, können wir JavaScript verwenden Stileigenschaften zu erreichen. Das Stilattribut stellt den Inline-Stil des Elements dar, und der Stil des Elements kann direkt über dieses Attribut geändert werden. Beispielsweise können wir die Hintergrundfarbe eines div-Elements mit dem folgenden Code auf Rot setzen:

var divElement = document.getElementById("example");
divElement.style.backgroundColor = "red";

Hier verwenden wir die Funktion getElementById, um das div-Element mit der ID-Beispieldatei abzurufen, und verwenden dann die style-Attribut zum Festlegen der Hintergrundfarbe.

Zusätzlich zur Hintergrundfarbe können wir über das Stilattribut auch viele andere Stile von Elementen festlegen, z. B. Farbe, Schriftart, Abstand usw. Das spezifische Syntaxformat lautet:

element.style.property = value;

#🎜 🎜#wobei Eigenschaft der Name des Stilattributs ist, Wert der Attributwert, zum Beispiel:

divElement.style.color = "blue";
divElement.style.fontSize = "20px";
divElement.style.padding = "10px";

2. Fügen Sie dynamisch ein Stylesheet hinzu

Manchmal brauchen wir um der Webseitentabelle dynamisch neue Stile hinzuzufügen, um eine flexiblere Stilkontrolle zu ermöglichen. Zu diesem Zeitpunkt können wir die JavaScript-Funktionen createElement und appendChild verwenden, um Stylesheets dynamisch hinzuzufügen.

Die spezifischen Schritte sind wie folgt:

Erstellen Sie ein Linkelement.

1. var linkElement = document.createElement("link");

Legen Sie die rel-, type- und href-Attribute des Link-Elements fest, wobei:

Die rel Das Attribut stellt den Tabellentyp „style“ dar und ist normalerweise auf „Stylesheet“ festgelegt.
• Das Typattribut gibt den Stylesheet-Dateityp an, der normalerweise auf Text/CSS eingestellt ist.
• Das href-Attribut stellt den Stylesheet-Dateipfad dar, der ein relativer oder ein absoluter Pfad sein kann.

linkElement.rel = "stylesheet";
linkElement.type = "text/css";
linkElement.href = "style.css";

Fügen Sie das Linkelement zum Kopfelement hinzu.

3. var headElement = document.getElementsByTagName("head")[0];
   headElement.appendChild(linkElement);

Auf diese Weise wird das Stylesheet erfolgreich zur Webseite hinzugefügt. Es ist zu beachten, dass wir vor dem Hinzufügen eines Stylesheets sicherstellen müssen, dass die Stylesheet-Datei geladen wurde. Andernfalls wird der Stil möglicherweise nicht wirksam.

3. Ermitteln Sie den berechneten Stil.

Manchmal müssen wir den berechneten Stil des Elements erhalten, dh den endgültigen Stil, nachdem alle Stilregeln auf das Element angewendet wurden Element. Wenn wir beispielsweise die berechnete Hintergrundfarbe eines bestimmten div-Elements benötigen, können wir dies mit der getComputedStyle-Funktion von JavaScript erreichen.

Die spezifischen Schritte sind wie folgt:

Erhalten Sie das Elementobjekt.

1. var divElement = document.getElementById("example");

Verwenden Sie die Funktion getComputedStyle, um den berechneten Stil zu erhalten.

2. var computedStyle = window.getComputedStyle(divElement);

Den berechneten Stilattributwert abrufen.

3. var backgroundColor = computedStyle.backgroundColor;

Hier ist zu beachten, dass die Funktion getComputedStyle ein CSSStyleDeclaration-Objekt zurückgibt, das alle berechneten Stile des Elements enthält. Wenn Sie den Wert eines bestimmten Attributs erhalten möchten, müssen Sie das entsprechende Attribut des Objekts verwenden. Beispielsweise stellt „computedStyle.backgroundColor“ die berechnete Hintergrundfarbe des Elements dar.

4. Ändern Sie den Klassennamen

Manchmal müssen wir den Stil des Elements ändern, indem wir den Klassennamen ändern. Beispielsweise müssen wir die Hintergrundfarbe eines div-Elements ändern, indem wir auf eine Schaltfläche klicken. Dies kann durch Ändern des Klassenattributs des Elements erreicht werden.

Die spezifischen Schritte sind wie folgt:

Erstellen Sie ein Schaltflächenelement.

1. var buttonElement = document.createElement("button");
   buttonElement.textContent = "切换背景色";

Fügen Sie dem Schaltflächenelement einen Klickereignishandler hinzu.

2. buttonElement.addEventListener("click", function() {
     var divElement = document.getElementById("example");
     divElement.classList.toggle("highlight");
   });

Hier haben wir eine Click-Event-Handler-Funktion hinzugefügt, die das classList-Attribut verwendet, um das Klassenattribut des Elements zu ändern. Wir verwenden die Umschaltfunktion, um zu wechseln, ob das Element den Namen der Hervorhebungsklasse enthält. Wenn das Element ursprünglich nicht den Namen der Hervorhebungsklasse enthält, fügen Sie den Klassennamen hinzu.

Schaltflächenelemente zur Webseite hinzufügen.

3. document.body.appendChild(buttonElement);

Auf diese Weise können Sie die Hintergrundfarbe des div-Elements dynamisch ändern, indem Sie auf die Schaltfläche klicken.

Zusammenfassung:

Die Stilkontrollfunktion von JavaScript bietet uns eine umfassende Methode zur Kontrolle des Webseitenstils. Durch die Beherrschung der oben vorgestellten Fähigkeiten können wir mehr Flexibilität und Interaktivität erreichen Seitenstileffekt. Gleichzeitig ist die Stilkontrolle auch eine der wesentlichen Fähigkeiten für die Web-Frontend-Entwicklung. Ich hoffe, dieser Artikel kann den Lesern hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo ändern Sie CSS in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!