So ändern Sie den CSS-Stil mit js

So ändern Sie den CSS-Stil in js: 1. Verwenden Sie [obj.className], um den Klassennamen des Stylesheets zu ändern. 2. Verwenden Sie [obj.style.cssTest], um das eingebettete CSS zu ändern. className], um den Klassennamen des Stylesheets 4 zu ändern. Verwenden Sie CSS, das den äußeren Link ändert.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3-Version, DELL G3-Computer.

JS-Methode zum Ändern des CSS-Stils:

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

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

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

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

Methode 3. Verwenden Sie obj.className, um den Stil zu ändern. Der Klassenname der Tabelle

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 CSS-Klassennamen von btB ändern. Es gibt zwei Möglichkeiten, ihn zu ändern der Stilklassenname. obj.className = "style2"; 2. obj.setAttribute("class", "style2"); hat den gleichen Effekt

Das Ändern von CSS auf diese Weise ist viel besser

Methode 4. Verwenden Sie das Ändern der externen CSS-Datei, um das CSS des Elements zu ändern.

Um den Stil von btB durch Ändern der externen CSS-Dateireferenz zu ändern, ist der Vorgang sehr einfach:

Zuerst müssen Sie auf das externe CSS verweisen 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");
 }

Empfohlene verwandte Tutorials: CSS-Video-Tutorial

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