HTML DOM Element classList ιδιότητα

Δефίνιση και χρήση

classList Η ιδιότητα επιστρέφει τα ονόματα των κλάσεων του στοιχείου.

classList Η ιδιότητα επιστρέφει τη DOMTokenList.

Παράδειγμα

Παράδειγμα 1

Προσθήκη της κλάσης "myStyle" στο στοιχείο:

const list = element.classList;
list.add("myStyle");

Try it yourself

Παράδειγμα 2

Αφαίρεση της κλάσης "myStyle" από το στοιχείο:

const list = element.classList;
list.remove("myStyle");

Try it yourself

Παράδειγμα 3

Ανακίνηση της ανοίξεως και της κλείσεως του "myStyle":

const list = element.classList;
list.toggle("myStyle");

Try it yourself

Σημείωση:Περισσότερες παραδείγματα στην κάτω πλευρά της σελίδας.

Γλώσσα

στοιχείο.classList

Επιστροφή τιμής

Τύπος Περιγραφή
Οντότητα DOMTokenList. Λίστα των ονομάτων των κλάσεων του στοιχείου.

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

classList ιδιότητες και μεθόδους

Όνομα Περιγραφή
add() Προσθέτει έναν ή περισσότερους token στη λίστα.
contains() Επιστρέφει true αν η λίστα περιέχει κλάσεις.
entries() Από τη λίστα επιστρέφει έναν αναγνώστη που περιέχει τοίχους/τιμές.
forEach() Εκτελέστε μια συνάρτηση callback για κάθε σύμβολο στη λίστα.
item() Επιστρέψτε το σύμβολο στην καθορισμένη θέση.
keys() Επιστρέψτε έναν αλυσίδα διαδρομής με τα κλειδιά της λίστας.
length Επιστρέψτε τον αριθμό των συμβόλων στη λίστα.
remove() Αφαιρέστε ένα ή περισσότερα σύμβολα από τη λίστα.
replace() Αντικαταστήστε το σύμβολο στη λίστα.
supports() Επιστρέψτε true αν το σύμβολο είναι υποστηριζόμενο από την ιδιότητα.
toggle() Ανακινήστε μεταξύ των συμβόλων της λίστας.
value Επιστρέψτε μια λίστα με τα σύμβολα ως αλυσίδα.
values() Επιστρέψτε έναν αλυσίδα διαδρομής με τις τιμές της λίστας.

Περισσότερα παραδείγματα

παράδειγμα 4

Προσθέστε πολλαπλές κλάσεις στο στοιχείο:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Try it yourself

παράδειγμα 5

Αφαιρέστε πολλαπλές κλάσεις από το στοιχείο:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Try it yourself

παράδειγμα 6

Πόσα ονόματα κλάσεων έχει το στοιχείο;

let numb = element.classList.length;

Try it yourself

παράδειγμα 7

Αποκτήστε τα ονόματα των κλάσεων του στοιχείου "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Είμαι το myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Try it yourself

παράδειγμα 8

Αποκτήστε την πρώτη κλάση του στοιχείου:

let className = element.classList.item(0);

Try it yourself

παράδειγμα 9

Αν το στοιχείο έχει την κλάση "myStyle";

let x = element.classList.contains("myStyle");

Try it yourself

παράδειγμα 10

Αν το στοιχείο έχει την κλάση "myStyle", αφαιρέστε την κλάση "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");

Try it yourself

παράδειγμα 11

διακινήστε μεταξύ των κλάσεων για να δημιουργήσετε ένα κουμπί αναδυόμενης λίστας:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");

Try it yourself

Example 12

Create a sticky navigation bar:

// Get the navigation bar
const navbar = document.getElementById("navbar");
// Get the offset position of the navigation bar
const sticky = navbar.offsetTop;
// Add the sticky class to the navigation bar when you reach its scroll position
// Remove it when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");

Try it yourself

Browser support

All browsers support element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Support 9-11 Support Support Support Support

Related pages

CSS tutorial:CSS syntax

CSS reference manual:CSS .class selector

DOMTokenList object

className attribute

getElementsByClassName() method

HTML DOM Style Αντικείμενο