So ändern Sie den Stil in Javascript

Änderungsmethode: 1. Verwenden Sie „Element Object.className“, um den Klassennamen des Stylesheets zu ändern. 2. Verwenden Sie „Element Object.style.cssTest“, um den eingebetteten CSS-Stil zu ändern ()“ Die Anweisung ändert den Stil des Elements, indem sie die externe CSS-Datei ändert.

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

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.cssTest, um eingebettetes CSS zu ändern.

3. 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

<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="更改外联css样式" onclick="recover()" />
 </div>
</div>

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;

}

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

Methode 3. Verwenden Sie

, um die externe CSS-Datei zu ändern Ändern Sie das CSS des Elementsobj.setAttributeUm den Stil von btB durch Ändern der Referenz der externen CSS-Datei zu ändern, ist der Vorgang sehr einfach:

Zunächst müssen Sie auf die externe CSS-Datei verweisen. 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");
 }

Auf diese Weise können Sie auch ganz einfach den Stil von btB ändern. Ich persönlich denke, dass diese Methode die nützlichste und beste Möglichkeit ist, eine umfassende Seitengestaltung zu erreichen.

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