Πώς να εναλλάξετε κλάσεις

Εναλλαγή κλάσεων

Πρώτο βήμα - Προσθήκη HTML:

Στο βήμα id="myDIV" εναλλαγή στοιχείων div μεταξύ τους (στο παράδειγμα αυτό, χρησιμοποιούμε το κουμπί για την εναλλαγή της κλάσης).

<button onclick="myFunction()">Δοκιμάστε</button>
<div id="myDIV">
  Αυτό είναι ένα στοιχείο DIV.
</div>

Δεύτερο βήμα - Προσθήκη CSS:

Προσθέστε μια κλάση για την εναλλαγή:

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Τρίτο βήμα - Προσθήκη JavaScript:

αποκτήστε id="myDIV" του στοιχείου <div> και στο "mystyle" Εναλλαγή κλάσεων:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Δοκιμάστε προσωπικά

Σελίδες συναφείς

Εκμάθηση:How to add class

Εκμάθηση:How to remove class

Reference manual:The classList property of HTML DOM Element