jQuery Schnellstart – CSS Klassen manipulieren

Du lernst in dieser Lektion, wie man CSS-Klassen mit jQuery hinzufügt oder entfernt.

jQuery bietet mehrere Methoden, wie addClass(), removeClass(), toggleClass() usw., um die CSS-Klassen zu manipulieren, die HTML-Elementen zugeordnet sind.

addClass()-Methode

Die Methode addClass() fügt eine oder mehrere Klassen zu den ausgewählten Elementen hinzu.

Im folgenden Beispiel wird die Klasse .ueberschrift zu den Elementen <h1> und die Klasse .highlighter zu den Elementen <p> mit der Klasse .hinweis beim Anklicken des Buttons hinzugefügt.

<script>
  $(document).ready(function() {
      $("button").click(function() {
          $("h1").addClass("ueberschrift");
          $("p.hinweis").addClass("highlighter");
      });
  });
</script>

 

Du kannst auch mehrere Klassen gleichzeitig zu den Elementen hinzufügen. Geben Sie einfach die durch Leerzeichen getrennte Liste der Klassen innerhalb der addClass()-Methode an.

removeClass() Methode

Auf ähnliche Weise kannst Du die Klassen mit der jQuery-Methode removeClass() aus den Elementen entfernen. Die removeClass()-Methode kann eine einzelne Klasse, mehrere Klassen oder alle Klassen auf einmal aus den ausgewählten Elementen entfernen.

Im folgenden Beispiel wird die Klasse .page-header aus den Elementen <h1> und die Klasse .hint und .highlight aus den Elementen <p> auf Knopfdruck entfernt.

<script>
  $(document).ready(function() {
      $("button").click(function() {
          $("h1").removeClass("ueberschrift");
          $("p.hinweis").removeClass("highlighter");
      });
  });
</script>

 

Wenn die removeClass()-Methode ohne ein Argument aufgerufen wird, entfernt sie alle Klassen aus den ausgewählten Elementen.

toggleClass() Methode

Die jQuery toggleClass() fügt eine oder mehrere Klassen zu den ausgewählten Elementen hinzu oder entfernt sie, so dass, wenn das ausgewählte Element die Klasse bereits hat, diese entfernt wird.

Wenn ein Element die Klasse nicht hat, wird sie hinzugefügt.

<script>
  $(document).ready(function(){
      $("p").click(function(){
          $(this).toggleClass("highlighter");
      });
  });
</script>

 

Fazit

In dieser Lektion hast du gelernt, wie du CSS-Klassen mit jQuery hinzufügst oder entfernst. jQuery bietet dir dafür mehrere Methoden, wie addClass(), removeClass() sowie die toggleClass()-Methode. Übe alle hier aufgeführten Methoden, denn du wirst sie ständig im Umgang mit jQuery benötigen. Die letzte Methode toggleClass(), wirst du z.B. für die 4. Coding-Challenge benötigen 😉

Wenn du bereit bist, findest du in der nächsten Lektion die dritte Coding-Challenge!