Heim > Artikel > Web-Frontend > Zwei Möglichkeiten, den CSS-Stil in nativem JS zu ändern

Zwei Möglichkeiten, den CSS-Stil in nativem JS zu ändern

迷茫Original: 2017-03-26 16:58:471711Durchsuche

Im Folgenden stelle ich Ihnen zwei Möglichkeiten vor, CSS-Stile in nativem JS zu ändern:

1Über den Knoten im Javascript-Code .cssText="css expression 1; css expression 2; css expression 3 " um den CSS-Stil direkt zu ändern.

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

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

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

ist nur ein einfaches p, das laufende Ergebnis ist

Verwenden Sie zuerst das Obige. Die erste Möglichkeit, den CSS-Stil zu ändern, besteht darin, den folgenden Javascript-Code zu schreiben:

<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 das Obige. Die zweite Möglichkeit, den CSS-Stil zu ändern, besteht darin, 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 : Diese beiden Die Ergebnisse beider Methoden sind gleich, aber was den Betriebsprozess betrifft, trennt die zweite Methode, die Methode „node.classname“, 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.

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, den CSS-Stil in nativem JS zu ändern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Detaillierte Erläuterung der Probleme bei der Konvertierung von js-DatentypenNächster Artikel：Detaillierte Erläuterung der Probleme bei der Konvertierung von js-Datentypen

In Verbindung stehende Artikel

Mehr sehen