So ändern Sie CSS in Javascript

So ändern Sie CSS in JavaScript: 1. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern. 2. Verwenden Sie obj.style.cssTest, um das eingebettete CSS zu ändern. 3. Verwenden Sie obj.className, um den Klassennamen zu ändern 4. Verwenden Sie externe CSS-Dateien, um CSS zu ändern.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Javascript-Zusammenfassung der dynamischen Änderung von CSS-Stilmethoden (vier Methoden)

In vielen Fällen ist es erforderlich, die Stile von Elementen auf Webseiten 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

 <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. Sie können feststellen, dass das btB-Tag [style="inline>outline" ein zusätzliches Attribut enthält. 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, um zu ändern eingebettetes CSS

Laden Sie den JavaScript-Code direkt hoch:

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

}

Der Effekt dieses Codes ist der gleiche wie in [1] und die Fehler sind die gleichen.

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

Verwenden Sie Code, um den Klassennamen des von btB referenzierten Stils zu ändern, wie im folgenden Codeausschnitt gezeigt:

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

Ändern Sie den Stil, indem Sie den Klassennamen von btBs CSS ändern. Es gibt zwei Möglichkeiten, den Namen der Stilklasse zu ändern. 2. obj.setAttribute("class", "style2"); Der Effekt ist derselbe

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

Ändern Sie die externe CSS-Dateireferenz, um den Stil von btB zu ändern Externe CSS-Datei, 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");
 }

Dies kann auch den Stil von btB leicht ändern. Ich persönlich denke, dass diese Methode die nützlichste und beste Lösung ist, um ein allgemeines Skinning zu erreichen

.

Erweitertes JavaScript-Tutorial

】

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!