Heim > Artikel > Web-Frontend > Wie ändere ich die Klasse eines Elements mit JavaScript?

Wie ändere ich die Klasse eines Elements mit JavaScript?

PHPznach vorne: 2023-08-30 14:29:041289Durchsuche

Das Attribut

如何使用 JavaScript 更改元素的类？

className wird verwendet, um die Klasse eines Elements zu ändern. Hier sehen wir zwei Beispiele -

So ändern Sie die Klasse eines Elements mithilfe des className-Attributs.
So wechseln Sie zwischen alten und neuen Kursen.

Ändern Sie die Klasse eines Elements mithilfe des className-Attributs

In diesem Beispiel ändern wir die Klasse eines Elements mithilfe des className-Attributs. Nehmen wir an, wir haben ein Div mit der Klasse oldStyle -

<div id="mydiv" class="oldStyle">
   <p>The div...</p>
</div>

Wir werden das className-Attribut verwenden, um die obige oldStyle-Klasse auf eine neue Klasse zu setzen, d. h. newStyle -

function demoFunction() {
   document.getElementById("mydiv").className = "newStyle";
}

Wir haben das Obige erreicht, indem wir demoFunction() beim Klicken auf die folgende Schaltfläche aufgerufen haben -

<p>Click the below button to change the class</p>
<button onclick="demoFunction()">Change Class</button>

Beispiel

Sehen wir uns das vollständige Beispiel an -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Changing the class</h1>
   <p>Click the below button to change the class</p>
   <button onclick="demoFunction()">Change Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         document.getElementById("mydiv").className = "newStyle";
      }
   </script>
</body>
</html>

Wechseln Sie zwischen alten und neuen Kategorien

Beispiel

Wir können auch eine Schaltfläche erstellen, die in beide Richtungen funktioniert, d. h. umschalten. Durch erneutes Klicken auf die Schaltfläche wird es wieder zurückgeschaltet -

<!DOCTYPE html>
<html>
<style>
   .oldStyle {
      background-color: yellow;
      padding: 5px;
      border: 2px solid orange;
      font-size: 15px;
   }
   .newStyle {
      background-color: green;
      text-align: center;
      font-size: 25px;
      padding: 7px;
   }
</style>
<body>
   <h1>Toggle the class</h1>
   <p>Click the below button to toggle the classes</p>
   <button onclick="demoFunction()">Toggle Class</button>
   <div id="mydiv" class="oldStyle">
      <p>The div...</p>
   </div>
   <script>
      function demoFunction() {
         const element = document.getElementById("mydiv");
         if (element.className == "oldStyle") {
            element.className = "newStyle";
         } else {
            element.className = "oldStyle";
         }
      }
   </script>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie ändere ich die Klasse eines Elements mit JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：JavaScript-Programm zum Ermitteln der Fläche und des Umfangs eines RechtecksNächster Artikel：JavaScript-Programm zum Ermitteln der Fläche und des Umfangs eines Rechtecks

In Verbindung stehende Artikel

Mehr sehen