So ersetzen Sie den CSS-Stil durch JS

So ersetzen Sie den CSS-Stil durch js: 1. Verwenden Sie obj.className, um den Klassennamen des Stylesheets zu ändern. 2. Verwenden Sie obj.style.cssText, um das eingebettete CSS zu ändern. 3. Verwenden Sie obj.className, um die Klasse zu ändern 4. Ändern Sie die externe CSS-Datei.

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

Wie ersetzt man den CSS-Stil durch JS?

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

Um einen bestimmten Spezialeffekt zu erzielen, müssen wir Javascript verwenden, um das CSS-Attribut eines bestimmten Tags dynamisch zu ändern Stil? Angesichts dieses Problems führt Sie der Editor dazu, das Problem der dynamischen Änderung von CSS-Stilen mit JavaScript zu lösen. Freunde, kommen Sie und lernen Sie

In vielen Fällen ist es notwendig, 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.cssText, 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 erklären.

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, wie ob.style.cssText vom btnB-Stil 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 [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 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 obj.className, um die Klasse des Stylesheets zu ändern. Name

Verwenden Sie Code, um den Klassennamen des btB-Referenzstils zu ändern, wie im folgenden Code gezeigt:

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");
Alle haben den gleichen Effekt
Das Ändern von CSS auf diese Weise ist viel besser als die obige Methode

Methode 4 . Verwenden Sie Änderungen. Externe CSS-Datei, wodurch das CSS des Elements geändert wird. Es ist sehr einfach, den Stil von btB zu ändern, indem Sie die externe CSS-Dateireferenz ändern Datei, der Code lautet wie folgt:

rrree

Damit kann auch der Stil von btB leicht geändert werden. Ich persönlich denke, dass diese Methode der nützlichste und beste Weg ist, um ein allgemeines Skinning zu erreichen

[Empfohlenes Lernen:
Grundlegendes JavaScript Tutorial

]

Das obige ist der detaillierte Inhalt vonSo ersetzen Sie den CSS-Stil durch JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!