Heim >Web-Frontend >CSS-Tutorial >So ändern Sie CSS in nativem JS
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>
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>
Das laufende Ergebnis ist:
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>
Das gleiche laufende Ergebnis ist:
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!