Zwei Möglichkeiten, den CSS-Stil in nativem JS zu ändern-js-Tutorial-php.cn

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

迷茫

Freigeben： 2017-03-26 16:58:47

Original

1760 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!