Μέθοδος toggle του αντικειμένου classList

Η μέθοδος toggle του αντικειμένου classList εναλλάσσει μια δεδομένη CSS κλάση στοιχείου: προσθέτει την κλάση αν αυτή δεν υπάρχει και την αφαιρεί αν υπάρχει.

Σύνταξη

javascriptelement.classList.contains(class);

Παράδειγμα

Σε αυτό το παράδειγμα, κατά τη χρήση της μεθόδου toggle η κλάση zzz θα αφαιρεθεί, αφού υπάρχει ήδη στο στοιχείο:

html<p id="elem" class="www ggg zzz"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Αποτέλεσμα εκτέλεσης του κώδικα:

html<p id="elem" class="www ggg"></p>

Παράδειγμα

Σε αυτό το παράδειγμα, κατά τη χρήση της μεθόδου toggle η κλάση zzz θα προστεθεί, αφού δεν υπάρχει στο στοιχείο:

html<p id="elem" class="www ggg"></p>

javascriptlet elem = document.querySelector('#elem');
elem.classList.toggle('zzz');

Αποτέλεσμα εκτέλεσης του κώδικα:

html<p id="elem" class="www ggg zzz"></p>

Δείτε επίσης