Zusammenfassung der Methoden zum dynamischen Ändern von CSS-Stilen in Javascript (vier Methoden)_Javascript-Kenntnisse

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 den Unterschied zwischen den oben genannten Methoden 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

 <div>
  <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
  <div 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()" />
  </div>
 </div>

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

Aus dem Code unten können Sie sehen, wie ob.style.cssTest aus dem Stil von btnB stammt.

 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. Sie können feststellen, dass das btB-Tag ein zusätzliches Attribut enthält [style="inline>outline". Und die Hove-Pseudoklasse von btB Der Hintergrund -color-Stil ist inline geschrieben, sodass die eingebettete Hintergrundfarbe die Pseudoklasse abdeckt, wodurch sich die Hintergrundfarbe nicht ändert, wenn die Maus auf btB

platziert wird.

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

JavaScript-Code direkt hochladen:

 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 die in [1], und auch die Mängel sind dieselben.

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

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");

CSS auf diese Weise zu ändern ist viel besser als oben.

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

Ändern Sie den Stil von btB, indem Sie die externe CSS-Dateireferenz ändern. Der Vorgang ist sehr einfach. Der Code lautet wie folgt:

Zuerst müssen Sie die externe CSS-Datei zitieren, der Code lautet wie folgt:

<link href="css1.css" rel="stylesheet" type="text/css" id="css"/>

function changeStyle4() {
   var obj = document.getElementById("css");
   obj.setAttribute("href","css2.css");
 }

Dadurch kann auch der Stil von btB leicht geändert werden. Ich persönlich denke, dass diese Methode die nützlichste und beste Lösung ist, um eine allgemeine Änderung des Seitendesigns zu erreichen.