So ändern Sie CSS in nativem JS-CSS-Tutorial-php.cn

So ändern Sie CSS in nativem JS

醉折花枝作酒筹

Freigeben： 2023-01-07 11:45:18

Original

3523 Leute haben es durchsucht

Die Methoden sind: 1. Durch node.style.cssText="css expression 1; css expression 2; css expression 3" 2. Legen Sie zuerst den Stil für eine bestimmte Klasse im CSS-Stylesheet fest und übergeben Sie dann node. classname="class name" hängt die Stileinstellung der Klasse an den Knoten node an.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Jetzt stelle ich Ihnen zwei Möglichkeiten vor, den CSS-Stil in nativem JS zu ändern:

1Durch node.style.cssText="CSS-Ausdruck 1; CSS-Ausdruck 2; im Javascript-Code; CSS-Ausdruck 3 „ ändert direkt den CSS-Stil.

2Legen Sie zunächst den Stil für eine bestimmte Klasse fest, z. B. „aktive Klasse“ im CSS-Stylesheet (die aktive Klasse wird hier angenommen und existiert vorerst nicht) und übergeben Sie dann node.classname=" aktiv“ im Javascript-Code „ bewirkt, dass die Stileinstellung der aktiven Klasse im CSS-Stylesheet an den Knotenknoten angehängt wird.

Das Folgende ist eine detaillierte Einführung, zunächst der HTML-Code:

<style type="text/css">
           div {
			float: left;
			padding: 20px;
			margin: 10px;
			border: 1px solid #000;
			background-color: #fff;
			color: #000;
		}
           .active
                {
                       background-color:blue
                }
</style>
<body>
      <div class="root">
      </div>
</body>

Nach dem Login kopieren

Verwenden Sie zunächst die erste oben genannte Methode, um den CSS-Stil zu ändern, und schreiben Sie den folgenden Javascript-Code:

<script type="text/javascript">  
          var root=document.getElementsByClassName("root")[0];
       root.style.cssText="background-color: blue;color: #fff;";
 </script>

Nach dem Login kopieren

Das laufende Ergebnis ist:

So ändern Sie CSS in nativem JS

Dann verwenden Sie die zweite oben erwähnte Methode, um den CSS-Stil zu ändern und den folgenden Javascript-Code zu schreiben:

<script type="text/javascript">  
       var root=document.getElementsByClassName("root")[0];
           root.className="active";</script>

Nach dem Login kopieren

Das gleiche laufende Ergebnis ist:

So ändern Sie CSS in nativem JS

Zusammenfassung: Die Ergebnisse dieser beiden Methoden sind die gleichen, aber in Bezug auf Der Operationsprozess: Die zweite Methode, die Methode „node.classname“, trennt das Schreiben von CSS und JS, was offensichtlich vernünftiger und geordneter ist. Wenn die CSS-Anweisung relativ einfach ist, gibt es keinen Unterschied zwischen den beiden Methoden. Wenn die CSS-Anweisung jedoch relativ komplex ist, ist die zweite Methode offensichtlich methodischer.

Empfohlenes Lernen: CSS-Video-Tutorial

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