Heim > Web-Frontend > js-Tutorial > Hauptteil

So ändern Sie CSS in Javascript

藏色散人
Freigeben: 2023-01-04 09:35:12
Original
3138 Leute haben es durchsucht

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.

So ändern Sie CSS in Javascript

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}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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

 }
Nach dem Login kopieren

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;

}
Nach dem Login kopieren

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");
 }
Nach dem Login kopieren

Ä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");
 }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage