W tym artykule nauczysz się zmieniać klasy CSS obiektem JavaScriptu classList w projekcie opartym na manipulacji DOM. Obiekt classList pozwala sterować klasami CSS przypisanymi do elementu HTML.
<!DOCTYPE html>
<html>
<head>
<title>Mon titre</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<style type="text/css">
.colorText {
color: purple;
}
.boldText {
font-weight: bold;
}
.bigText {
font-size: 35px;
}
</style>
</head>
<body>
<p id="myText">
Hello World!
</p>
</body>
</html>Zmieńmy teraz wygląd tekstu właściwością classList i nałóżmy klasy CSS.
Metody classList .add() i .contains()
Utwórz plik index.js, pobierz referencję do elementu akapitu i wywołaj metodę classList.add():
index.js
const myText = document.getElementById('myText');
myText.classList.add('colorText');Wbudowana metoda classList.add() nakłada klasę na element HTML. W tym wypadku tekst w akapicie będzie od teraz fioletowy.
Możesz też sprawdzić, czy dana klasa CSS jest na akapicie, metodą classList.contains(), która zwraca wartość logiczną:
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // truePonieważ klasa CSS colorText jest na akapicie, wywołanie zwraca true.
Metody .item() i .remove() obiektu classList
W pliku index.js dodaj do akapitu kolejne klasy CSS:
index.js
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];Właściwość classList przechowuje każdą dodatkową klasę w tablicy. Jeśli wypiszesz myText.classList w konsoli, dostaniesz tablicę ze swoimi klasami CSS.
Żeby sprawdzić indeks konkretnej klasy CSS w tablicy, wywołaj metodę classList.item():
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Żeby usunąć klasę CSS, użyj metody classList.remove():
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'];Kiedy wypiszesz myText.classList w konsoli, usuniętej klasy CSS nie będzie już w tablicy i nie zadziała ona na akapicie.
Skoro umiesz już dodawać, sprawdzać i usuwać klasy CSS, zobaczmy, co jeszcze potrafi classList.
Obsługa metody classList .toggle()
Zamiast wywoływać classList.add() i classList.remove() naraz, możesz sięgnąć po metodę classList.toggle():
W tym celu podepnij nasłuch zdarzenia do przycisku w pliku index.js:
index.js
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});Przy każdym kliknięciu classList.toggle() dodaje klasę CSS, jeśli nie ma jej w tablicy classList, i zwraca true. Jeśli klasa CSS już tam jest, metoda ją usuwa i zwraca false.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> klasa została dodanaMetodzie classList.toggle() możesz też podać wartość logiczną jako opcjonalny drugi argument. Klasa CSS zostanie wtedy dodana albo usunięta, zależnie od tego, jak wypadnie ten drugi argument:
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' już istnieje i zostanie usunięty z tablicy classList
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' nie istnieje i klasa zostanie dodana.Metoda classList.toggle() pozwala dodawać i usuwać klasy CSS niezależnie od tego, czy są już w tablicy, i to krótszym kodem.
Podsumowanie
Właściwość classList daje szybszy i wygodniejszy sposób na zmianę elementów HTML oraz ich klas CSS w JavaScripcie.
Więcej znajdziesz w artykule o tym, jak modyfikować DOM w JavaScripcie.
