Umschalten der Klasse mit JavaScript

1. Klasse eines HTML-Elements beim Mauszeiger in JavaScript umschalten
2. Klasse eines HTML-Elements bei Mausklick in JavaScript umschalten

Wir werden eine Methode zum Umschalten der Klasse von HTML-Elementen mit JavaScript vorstellen.

Klasse eines HTML-Elements beim Mauszeiger in JavaScript umschalten

Das Umschalten der Klasse bedeutet, wenn dem HTML-Element kein Klassenname zugewiesen ist, kann ihm dynamisch ein Klassenname zugewiesen werden, oder wenn eine bestimmte Klasse bereits vorhanden ist, kann sie dynamisch entfernt werden. In der Computertechnik ist Mouseover ein grafisches Steuerelement, das aktiviert wird, wenn der Benutzer den Mauszeiger über einen Triggerbereich bewegt oder schwebt, normalerweise mit einer Maus.

Die Umschaltfunktion wird in JavaScript eingeführt. In der JavaScript-Datei verwenden wir eine Methode querySelector(), die das erste Element zurückliefert, das mit einem oder mehreren angegebenen CSS-Selektoren im Dokument übereinstimmt. In der Datei unten ist die ID #container mit dem Element <div> verknüpft; daher haben wir das Element <div> auf einem variablen Container. Um die erforderliche Funktionalität des Umschaltens von Klassen beim Schweben einer Maus zu erreichen, müssen wir die Methode addEventListener() verwenden, die einen Event-Handler an das HTML-Dokument anhängt. Und die tatsächlichen Ereignisse, die wir verwendet haben, sind die Ereignisse mouseenter und mouseleave. Das Ereignis mouseenter tritt ein, wenn der Mauszeiger auf ein Element bewegt wird. Das Ereignis mauseleave tritt ein, wenn der Mauszeiger aus dem Element herausbewegt wird.

Beim Auftreten des Ereignisses mouseenter verwenden wir die Eigenschaft classList, die Methoden add() und remove(). Wird der Mauszeiger über die Elementklasse <div> bewegt, wird das erste div-Element durch die Methode remove() entfernt und die Klasse second zum Element <div> hinzugefügt. Ebenso fügt der Mauszeiger beim Herausziehen die Klasse first hinzu und entfernt die Klasse second. Daher wird das Umschalten erreicht, wenn die Maus über das Element <div> schwebt.

Wir haben ein HTML-Dokument, in dem Links zur CSS-Datei styles.css und zur JavaScript-Datei index.js im HTML-Dokument mit den Tags <link> bzw. <script></script> angegeben sind. Wir möchten die Funktionalität beim Bewegen des Mauszeigers über das Element <div> erreichen, dessen Klasse umgeschaltet werden soll. Wir werden dies tun, indem wir JavaScript verwenden. In HTML haben wir das Element <div> eindeutig durch den ID-Container identifiziert, und eine Klasse first ist bereits mit demselben Element verknüpft.

In CSS definieren wir die Eigenschaften und Werte von Klassenselektoren. Wir haben das CSS einfach gemacht und die Klasse first hat eine Eigenschaft background und ihr Wert ist grün. Ebenso hat die Klasse second die Eigenschaft Hintergrund und den Wert orange.

Beispielcode:

<div id="container" class="first">
  <h1>
    JavaScript is Easy
  </h1>
</div>

var container = document.querySelector('#container');

container.addEventListener('mouseenter', function() {
  this.classList.remove('first');
  this.classList.add('second');
})
container.addEventListener('mouseleave', function() {
  this.classList.add('first');
  this.classList.remove('second');
})

.first {
    background: green;
}

.second {
    background: orange;
}

Klasse eines HTML-Elements bei Mausklick in JavaScript umschalten

Wir können eine HTML-Klasse mit JavaScript beim Mausklick umschalten, wie wir es für die Maus über dem Ereignis in der obigen Methode getan haben. Erstellen Sie beispielsweise einen Absatz mit einem <p>-Tag mit der ID p. Schreiben Sie etwas Text in das Tag. Erstellen Sie dann ein <button>-Tag mit dem onclick-Attribut. Rufen Sie die Funktion myFunc() mit dem Attribut onclick auf. Schreiben Sie den Text Button zwischen die Tags.

Wählen Sie in CSS mit dem Klassenselektor die paragraphClass und geben Sie font-size auf 30px und color auf red. Schreiben Sie in JavaScript die Funktion myFunc() und wählen Sie die p-ID von HTML mit getElementById aus und speichern Sie sie in einer para-Variablen. Rufen Sie die Eigenschaft classList und dann die Methode toggle() mit der Variablen auf. Schreiben Sie die Klasse paragraphClass als Parameter der Methode toggle().

Wir haben das Element p innerhalb der Variablen para mit der Methode getElementById() erhalten. Mit der Eigenschaft classList haben wir die Funktion toggle() für das Element <p> des HTML-Dokuments verwendet. Wenn unten angeklickt wird und myFunc() ausgeführt wird, wird der CSS-Klassenselektor paragraphClass für das Element <p> ein- und ausgeschaltet. Daher wird das Umschalten beim Klicken mit der unteren Maustaste erreicht.

Beispielcode:

<p id="p">
        Click Button to toggle between classes
</p>
<button onclick="myFunc()">
        Button
</button>

      .paragraphClass {
            font-size: 30px;
            color: red;
        }

function myFunc() {
  var para = document.getElementById('p');
  para.classList.toggle('paragraphClass');
}