So ändern Sie CSS-Eigenschaften in JS

JavaScript (JS) ist eine Programmiersprache, die zum Entwerfen interaktiver Webseiten und dynamischer Websites verwendet wird. JS kann über DOM (Document Object Model) auf Elemente in HTML-Seiten zugreifen und diese bedienen. In diesem Artikel wird hauptsächlich die Verwendung von JS zum Ändern von CSS-Eigenschaften vorgestellt.

1. Holen Sie sich das Element
Bevor Sie die CSS-Eigenschaften ändern, müssen Sie das Element abrufen, das bearbeitet werden soll. Sie können ein Element über seine Element-ID mit der Methode document.getElementById() oder über einen CSS-Selektor mit der Methode document.querySelector() abrufen.

Wie im folgenden Beispiel:
HTML-Code:

<div id="myDiv">Hello World!</div>

JS-Code:

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

oder

var myDiv = document.querySelector("#myDiv");

#🎜 🎜 #Beide Codezeilen erhalten das div-Element mit dem Text „Hello World!“.

2. CSS-Eigenschaften ändern

Es gibt zwei Möglichkeiten, CSS-Eigenschaften zu ändern: Ändern Sie den Stil direkt über das Stilattribut oder ändern Sie den Stil über das Klassenattribut.

1. Stil direkt ändern

   Sie können das Stilattribut des Elements verwenden, um den CSS-Stil zu ändern. Das folgende Beispiel ändert die Hintergrundfarbe in Rot: # 🎜🎜#

   myDiv.style.backgroundColor = "red";

   #🎜🎜 #Sie können auch mehrere Stile gleichzeitig ändern:
   

   myDiv.style.backgroundColor = "red";
   myDiv.style.color = "white";

   Über das Klassenattribut
Sie können mehrere vordefinieren Stile in der CSS-Datei durch Ändern des Klassenattributs, und dann wird in JS der Stil durch das Klassenattribut des Elements geändert. Ändern Sie im folgenden Beispiel die Hintergrundfarbe in Blau:
2. CSS-Code:

   .blue-background {
     background-color: blue;
   }

   
   JS-Code:
   

   myDiv.className = "blue-background";

   Auf diese Weise können Sie die Hintergrundfarbe des ändern div-Element zu blue .
   3. Durch Ereignisse ausgelöste Stiländerungen
JS kann auch Stiländerungen auslösen, nachdem der Benutzer bestimmte Vorgänge ausgeführt hat. Wenn sich im folgenden Beispiel die Maus über dem Element befindet, ändert sich die Textfarbe in Grün:

HTML-Code:

<div id="myDiv">Hello World!</div>

JS-Code:

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

myDiv.onmouseover = function() {
  myDiv.style.color = "green";
};

myDiv.onmouseout = function() {
  myDiv.style.color = "black";
};

Wenn sich die Maus über dem Element befindet. Wenn die Maus nach oben bewegt wird, wechselt die Textfarbe zu Grün; wenn die Maus wegbewegt wird, kehrt die Textfarbe zu Schwarz zurück.

Zusammenfassung:

Durch die Verwendung von JS können Sie den Stil von HTML-Elementen einfach ändern, um die Website dynamischer und interessanter zu gestalten. Mit der oben genannten Methode können Sie JS flexibel verwenden, um den Stil im Website-Design zu ändern und die Seite vielfältiger zu gestalten.

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