Ιδιότητα classList

Η ιδιότητα classList περιέχει μια ψευδο-συστοιχία CSS κλάσεων του στοιχείου, και επίσης επιτρέπει την προσθήκη και αφαίρεση κλάσεων του στοιχείου, τον έλεγχο ύπαρξης συγκεκριμένης κλάσης μεταξύ των κλάσεων του στοιχείου.

Πρόκειται για το χαρακτηριστικό class, μέσα στο οποίο μπορεί κανείς να γράψει πολλές κλάσεις διαχωρισμένες με κενό, για παράδειγμα www ggg zzz. Με τη βοήθεια του classList μπορεί κανείς να αφαιρέσει, για παράδειγμα, την κλάση ggg, χωρίς να επηρεάσει τις υπόλοιπες κλάσεις.

Σύνταξη

στοιχείο.classList;

Παράδειγμα . Αριθμός κλάσεων

Ας μάθουμε τον αριθμό των κλάσεων του στοιχείου:

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

let elem = document.querySelector('#elem');

let length = elem.classList.length;
console.log(length);

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

3

Παράδειγμα . Διατρέχουμε τις κλάσεις

Ας εμφανίσουμε μία-μία τις κλάσεις του στοιχείου:

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

let elem = document.querySelector('#elem');
let classNames = elem.classList;

for (let className of classNames) {
	console.log(className);
}

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

'www'
'ggg'
'zzz'

Δείτε επίσης

μέθοδος classList.add,
που προσθέτει μια δεδομένη κλάση
μέθοδος classList.remove,
που αφαιρεί μια δεδομένη κλάση
μέθοδος classList.contains,
που ελέγχει για μια δεδομένη κλάση
μέθοδος classList.toggle,
που εναλλάσσει μια δεδομένη κλάση