Empfehlen Sie vier Beispielcodes für Javascript-Änderungen im CSS-Stil

In vielen Fällen ist es notwendig, die Stile von Elementen auf der Webseite dynamisch zu ändern. JavaScript bietet verschiedene Möglichkeiten, Stile dynamisch zu ändern. Die Verwendung, Auswirkungen und Mängel der Methoden werden im Folgenden vorgestellt.

1. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern.

2. Verwenden Sie obj.style.cssTest, um eingebettetes CSS zu ändern.

3. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern.

4. Verwenden Sie die externe CSS-Datei, um das CSS des Elements zu ändern

Das Folgende ist ein Teil des HTML-Codes und des CSS-Codes, um die obige Methode zu erläutern .

CSS

.style1{margin:10px auto ;background-color:#9999FF; display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; }

.style1:hover{ background-color:#66B3FF; cursor:pointer;}

.style2{margin:10px auto ;background-color:gray; display:block;color:black; border:1px solid white; padding:10px 25px; font-size:18px; }

.style2:hover{ background-color:black; color:White; cursor:pointer}

HTML

 <p>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <p id="tool">
   <input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
   <input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
   <input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
   <input type="button" value="更改外联css样式" onclick="recover()" />
  </p>
 </p>

Methode 1. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern

Aus dem folgenden Code können Sie sehen, woher ob.style.cssTest stammt BtnBs Stil von.

 function changeStyle1() {
   var obj = document.getElementById("btnB");
   obj.style.backgroundColor= "black";

 }

Dieser Code ändert die Farbe des btB-Textes. Öffnen Sie das Debugging-Tool im Browser und Sie können feststellen, dass es im btB-Tag [Stil] ein zusätzliches Attribut gibt ="inside Inline > Outline. Der Hintergrundfarbenstil der Hove-Pseudoklasse von btB ist inline geschrieben, sodass die eingebettete Hintergrundfarbe die Pseudoklasse abdeckt, wodurch sie unsichtbar wird, wenn die Maus auf btB platziert wird. Änderung des Hintergrunds Farbe.

Methode 2: Verwenden Sie obj.style.cssTest, um das eingebettete CSS zu ändern

Laden Sie den JavaScript-Code direkt hoch:

 function changeStyle2() {
   var obj = document.getElementById("btnB");
   obj.style.cssText = "background-color:black; display:block;color:White;

}

Die Wirkung dieses Codes ist die gleiche wie in [1] und die Fehler sind die gleichen

Methode 3. Verwenden Sie zum Ändern obj.className it. Der Klassenname des Stylesheets

Verwenden Sie Code, um den Klassennamen des btB-Referenzstils zu ändern, z. B. den folgenden Code:

 function changeStyle3() {
   var obj = document.getElementById("btnB");
   //obj.className = "style2";
   obj.setAttribute("class", "style2");
 }

Ändern Sie den Stil, indem Sie den Klassennamen des btB-CSS ändern. Es gibt zwei Möglichkeiten, den Stilklassennamen zu ändern: 1. obj.className = "style2"; 2. obj.setAttribute("class" , "style2"); derselbe Effekt

CSS auf diese Weise zu ändern ist viel besser als die oben beschriebene Methode: Verwenden Sie die externe CSS-Datei zum Ändern Das CSS des Elements<.>

Ändern Sie den Stil von btB, indem Sie die Referenz der externen CSS-Datei ändern. Der Vorgang ist wie folgt: Zuerst müssen Sie Verweisen Sie auf die externe CSS-Datei. Der Code lautet wie folgt:

Das obige ist der detaillierte Inhalt vonEmpfehlen Sie vier Beispielcodes für Javascript-Änderungen im CSS-Stil. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!