Heim > Artikel > Web-Frontend > So ändern Sie CSS in nativem JS
So ändern Sie CSS in nativem JS
- 醉折花枝作酒筹Original
- 2021-07-23 10:20:083415Durchsuche
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!