Element.classList

Obiekt do dodawania, usuwania, przełączania i sprawdzania klas CSS elementu.

Zwraca: Obiekt DOMTokenList. Metody toggle(), contains() i replace() zwracają true lub false.

Na tej stronie

Przykład
Definicja i zastosowanie
Składnia
Parametry
Więcej przykładów
Obsługa przeglądarek
Dobre praktyki
Powiązane hasła

Przykład

JavaScript

const card = document.querySelector('#card')

card.classList.add('active', 'highlight')
card.classList.remove('highlight')
console.log(card.className)

console.log(card.classList.toggle('done'))
console.log(card.classList.contains('done'))
console.log(card.classList.toggle('done'))
console.log(card.className)

Konsola

card active

true

false

card active

Definicja i zastosowanie

Właściwość classList zwraca obiekt DOMTokenList z klasami elementu i metodami do ich zmiany. To najwygodniejszy sposób, żeby z JavaScriptu zmieniać wygląd strony: styl opisujesz w CSS pod nazwą klasy, a skrypt tylko ją dodaje albo usuwa.

Najważniejsze metody to add() i remove(), które przyjmują jedną lub kilka klas, toggle(), która dodaje klasę, gdy jej nie ma, i usuwa, gdy jest, contains() do sprawdzania oraz replace(stara, nowa). toggle() zwraca true, jeśli klasa została dodana, a drugi argument (true lub false) pozwala wymusić wynik.

W przeciwieństwie do nadpisywania className metody classList nie ruszają pozostałych klas. Dodanie klasy, która już jest, albo usunięcie nieistniejącej niczego nie psuje.

Składnia

element.classList.add(className1, className2, …)
element.classList.remove(className1, className2, …)
element.classList.toggle(className)
element.classList.toggle(className, force)
element.classList.contains(className)
element.classList.replace(oldClass, newClass)

Parametry

className
napis
Nazwa klasy bez kropki, np. "active".
force
opcjonalny, boolean
W toggle(): true zawsze dodaje klasę, a false zawsze ją usuwa.
oldClass, newClass
napisy
W replace(): klasa do zamiany i klasa, która zajmie jej miejsce.

Parametr	Typ	Opis
className	napis	Nazwa klasy bez kropki, np. `"active"`.
force	opcjonalny, boolean	W `toggle()`: `true` zawsze dodaje klasę, a `false` zawsze ją usuwa.
oldClass, newClass	napisy	W `replace()`: klasa do zamiany i klasa, która zajmie jej miejsce.

Więcej przykładów

Przełącznik motywu

JavaScript

const panel = document.querySelector('#panel')
const button = document.querySelector('#theme')

button.addEventListener('click', () => {
  const isLight = panel.classList.toggle('light')
  console.log(isLight ? 'Motyw jasny' : 'Motyw ciemny')
})

button.click()

Konsola

Motyw jasny

Wymuszenie stanu drugim argumentem

JavaScript

const email = document.querySelector('#email')
const isValid = email.value.includes('@') && email.value.includes('.')

email.classList.toggle('invalid', !isValid)

console.log(email.classList.contains('invalid'))
console.log([...email.classList])

Konsola

true

['invalid']

Obsługa przeglądarek

Szeroko dostępne

Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.

Chrome
Edge
Firefox
Safari

Dobre praktyki

Podawaj nazwy klas bez kropki: classList.add("active"), a nie ".active".
Wygląd opisuj w CSS, a w JavaScripcie tylko przełączaj klasy. Kod jest czytelniejszy niż ustawianie wielu stylów przez style.
Przypisanie element.className = "active" usuwa wszystkie inne klasy, a classList.add() dokłada klasę do istniejących.

Powiązane hasła

Widzisz błąd albo brakuje przykładu? Napisz do nas.

Darmowy kursPrzećwicz JavaScript w kursie JavaScript i ReactZadania z podpowiedziami, edytor kodu i postępy zapisywane na bieżąco.Zobacz kurs