Atrybut classList obiektu HTML DOM Element

Definicja i użycie

classList Atrybut zwraca nazwy klas elementu.

classList Atrybut zwraca DOMTokenList.

Przykład

Przykład 1

Dodaj klasę "myStyle" do elementu:

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

Spróbuj sam

Przykład 2

Usuń klasę "myStyle" z elementu:

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

Spróbuj sam

Przykład 3

Przełącz stan "myStyle":

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

Spróbuj sam

Wskazówka:Więcej przykładów znajduje się na dole strony.

Gramatyka

element.classList

Zwraca wartość

Typ Opis
Obiekt DOMTokenList. Lista nazw klas elementu.

Uwaga:Atrybut classList jest jedynie odczytywany, ale możesz użyć poniższych metod, aby dodać, przełączyć lub usunąć CSS klasy z listy:

Atrybuty i metody classList

Nazwa Opis
add() Dodaje jeden lub kilka tokenów do listy.
contains() Zwraca true, jeśli lista zawiera klasy.
entries() Zwraca iterator zawierający pary klucz/wartość z listy.
forEach() Wykonaj funkcję zwrotną dla każdego tokena w liście.
item() Zwróć token na określonym indeksie.
keys() Zwróć iterator zawierający klucze z listy.
length Zwróć liczbę tokenów w liście.
remove() Usuń jeden lub kilka tokenów z listy.
replace() Zastąp token w liście.
supports() Zwróć true, jeśli token jest jednym z obsługiwanych tokenów atrybutu.
toggle() Przełącz między tokenami w liście.
value Zwróć listę tokenów jako ciąg znaków.
values() Zwróć iterator z wartościami listy.

Więcej przykładów

Przykład 4

Dodaj wiele klas do elementu:

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

Spróbuj sam

Przykład 5

Usuń wiele klas z elementu:

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

Spróbuj sam

Przykład 6

Ile klas ma element?

let numb = element.classList.length;

Spróbuj sam

Przykład 7

Uzyskaj nazwę klasy elementu "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Jestem myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Spróbuj sam

Przykład 8

Uzyskaj pierwszą klasę elementu:

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

Spróbuj sam

Przykład 9

Czy element ma klasę "myStyle"?

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

Spróbuj sam

Przykład 10

Jeśli element ma klasę "myStyle", usuń "anotherClass":

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

Spróbuj sam

Przykład 11

Przełącz między klasami, aby utworzyć przycisk rozwijany:

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

Spróbuj sam

Przykład 12

Utwórz nawigację przylegającą:

// Pobierz pasek nawigacji
const navbar = document.getElementById("navbar");
// Pobierz pozycję offsetową paska nawigacji
const sticky = navbar.offsetTop;
// Dodaj klasę sticky do paska nawigacji, gdy dotrzesz do jego pozycji przewijania
// Usuń go, gdy opuścisz pozycję przewijania
function myFunction() {
  jeśli (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Spróbuj sam

Wspierane przeglądarki

Wszystkie przeglądarki wspierają element.classList:

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

Strony związane

Kurs CSS:Gramatyka CSS

Podręcznik referencyjny CSS:Wybieracz .class CSS

Obiekt DOMTokenList

Atrybut className

Metoda getElementsByClassName()

Obiekt Style w HTML DOM