Wie kann man Elementklasse mit JavaScript ändern

Das Attribut class kann von JavaScript (über das HTML DOM) verwendet werden, um HTML-Elemente mit einer definierten Klasse zu modifizieren. Die angegebene Klasse kann unterschiedlich geändert werden. Hier ist der grösste Teil der üblichen Methodik, um Klassen in DOM Elementen zu ändern:

  • 1. .className Method

Die Eigenschaft .className setzt oder gibt den Wert des Attributes class des angegebenen Elements zurück.

  • Um die Eigenschaft .className zurückzugeben, verwenden die folgende Syntax:
HTMLElementObject.className
  • Um die Eigenschaft .className zu einstellen, verwenden Sie die folgende Syntax:
HTMLElementObject.className = class

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .style {
      width: 150px;
      height: 50px;
      background-color:#1c87c9;
      text-align: center;
      font-size: 20px;
      Color: #e6ebef;
      margin-bottom: 10px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um class für das Tag div einzustellen.</p>
    <div id="Div">
      Ich bin ein Div Element.
    </div>
    <button onclick="myFunction()">Klicken</button>
    <script>
      function myFunction() {
          document.getElementById("Div").className = "style";
      }
    </script>
  </body>
</html>
  • 2. .classList Method

Die Eigenschaft .classList ist eine Read-Only-Eigenschaft, die den Klassennamen eines Elements als ein Objekt von DOMTokenList zurückgibt. Diese Methode schließt auch andere Methoden ein. Sehen sie unten:

  • hinzufügen (class1, class2, ...)

Diese Methode fügt einen Klassewert zu einer Elementenliste von Klassen hinzu. Wenn die Klasse bereits existiert, wird sie die Klasse wieder nicht hinzufügen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
      width: 200px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um "class1" zu Div hinzuzufügen.</p>
    <button onclick="myFunction()">Clicken</button>
    <p><strong>Note:</strong> Die Eigenschaft classList wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.</p>
    <div id="myDiv">
      Ich bin ein Div Element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.add("class1");
      }
    </script>
  </body>
</html>
  • Entfernen (class1, class2, ...)

Diese Methode entfernt einen Klassenwert von einer Elementenliste von Klassen. Wenn die Klasse nicht existiert, wird sie keinen Fehler zeigen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .class1 {
      width: 300px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      text-align: center;
      padding: 5px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um "class1" von Div zu entfernen.</p>
    <button onclick="myFunction()">Klicken</button>
    <p><strong>Hinweis:</strong> DieEigenschaft classList wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.</p>
    <div id="myDiv" class="class1">
      Ich bin ein Div Element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.remove("class1");
      }
    </script>
  </body>
</html>
  • item(index)

Diese Methode gibt einen Klassenwert durch die Indexzahl von einem Element zurück. Index beginnt mit 0 und ergibt Null, wenn der Index außer Reichweite ist.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 500px;
      height: 30px;
      }
      .Class2 {
      background-color: lightblue;
      }
      .Class3 {
      text-align: center;
      font-size: 25px;
      color: black;
      margin-bottom: 10px;
      padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>Click the button to display the class name of the first class (index 0) of div.</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      I am a Div element with three classes.
    </div>
    <button onclick="myFunction()">Click</button>
    <p><strong>Note:</strong> The classList property is not supported in Internet Explorer 9 and earlier versions.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv").classList.item(0);
          document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>
  • Hin- und herschalten(class, true|false)

Diese Methode schaltet die Existenz eines Klassenwertes in einer Elementenliste von Klassen hin und her. Wenn nur ein Parameter vorhanden ist, und die Klasse existiert, entfernt es die angegebene Klasse von einem Element und ergibt false. Wenn die Klasse nicht existiert, wird sie zum Element hinzugefügt und ergibt true.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 150px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
      .Class2 {
      width: 300px;
      height: 100px;
      background-color: #8ebf42;
      text-align: center;
      font-size: 25px;
      color:  #eee;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um zwischen zwei Klassen hin-und herzuschalten.</p>
    <button onclick="myFunction()">Klicken</button>
    <p><strong>Note:</strong> Die Eigenschaft classList wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.</p>
    <div id="myDiv" class="Class1">
      Ich bin ein Div Element.
    </div>
    <script>
      function myFunction() {
          document.getElementById("myDiv").classList.toggle("Class2");
      }
    </script>
  </body>
</html>
  • contains (class)

Diese Methode überprüft, ob ein Element den angegebenen Klassennamen hat. Mögliche Werte:true; false.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .Class1 {
      width: 500px;
      height: 50px;
      border: 1px solid black;
      }
      .Class2 {
      background-color: #eee;
      padding: 25px;
      }
      .Class3 {
      text-align: center;
      font-size: 25px;
      color: #1c87c9;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um herauszufinden, ob das Element Div eine Klasse von "Class1" hat.</p>
    <div id="myDiv" class="Class1 Class2 Class3">
      Ich bin ein Div-Element.
    </div>
    <button onclick="myFunction()">Klicken</button>
    <p><strong>Note:</strong> Die Eigenschaft classList wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv").classList.contains("Class1");
          document.getElementById("demo").innerHTML = x;
      }
    </script>
  </body>
</html>
  • replace(oldClass, newClass)

Diese Methode ersetzt eine existierende Klasse mit einer Neuen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style>
      .oldClass {
      width: 150px;
      height: 50px;
      background-color: #1c87c9;
      color: #e6ebef;
      font-size: 25px;
      padding: 5px;
      }
      .newClass {
      width: 300px;
      height: 100px;
      background-color: #8ebf42;
      text-align: center;
      font-size: 25px;
      color:  #eee;
      margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <p>Klicken Sie auf den Button, um die Klasse zu ersetzen.</p>
    <button onclick="myFunction()">Klicken</button>
    <p><strong>Note:</strong>Die Eigenschaft classList wird in Internet Explorer 9 und früheren Versionen nicht unterstützt.</p>
    <div id="myDiv" class="oldClass">
      Ich bin ein Div-Element.
    </div>
    <script>
      function myFunction() {
          var x = document.getElementById("myDiv");
          x.classList.replace("oldClass", "newClass");
      }
    </script>
  </body>
</html>