Neste artigo vais aprender a modificar classes CSS com o objeto JavaScript classList no teu projeto de manipulação do DOM. O objeto classList permite-te ajustar as classes CSS atribuídas a um elemento 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>Vamos agora alterar o teu texto com a propriedade classList e aplicar as tuas classes CSS.
Usar os métodos classList .add() e .contains()
Cria um ficheiro index.js, obtém uma referência para o teu elemento de parágrafo e chama o método classList.add():
index.js
const myText = document.getElementById('myText');
myText.classList.add('colorText');O método classList.add() aplica uma classe ao teu elemento HTML. Neste caso, o texto do parágrafo passa a aparecer a roxo.
Também podes verificar se a classe CSS existe no teu elemento de parágrafo com o método classList.contains(), que devolve um booleano:
const myText = document.getElementById('myText');
console.log(myText.classList.contains('colorText')); // trueComo a classe CSS colorText existe no teu elemento de parágrafo, a chamada devolve true.
Usar os métodos .item() e .remove() do classList
No teu ficheiro index.js, acrescenta outras classes CSS ao elemento de parágrafo:
index.js
const myText = document.getElementById('myText');
myText.classList.add('boldText');
myText.classList.add('bigText');
console.log(myText.classList); // ['colorText', 'boldText', 'bigText'];A propriedade classList guarda cada classe adicional num array. Se fizeres um console.log de myText.classList, obténs um array com as tuas classes CSS.
Para ver o índice de cada classe CSS no array, chama o método classList.item():
const myText = document.getElementById('myText');
myText.classList.item('boldText'); // 2Para remover uma classe CSS, usa o método classList.remove():
const myText = document.getElementById('myText') ;
myText.classList.remove('bigText') ;
console.log(myText.classList) ; // ['colorText', 'boldText'];Depois de veres myText.classList na consola, a classe CSS que removeste já não aparece no array e deixa de se aplicar ao teu elemento de parágrafo.
Agora que sabes acrescentar, verificar e remover classes CSS, vejamos como tirar partido de outros métodos do classList.
Trabalhar com o método classList .toggle()
Em vez de chamares classList.add() e classList.remove() em conjunto, podes usar o método classList.toggle():
Para isso, coloca um escutador de eventos num botão no teu ficheiro index.js:
index.js
textButton.addEventListener('click', () => {
myText.classList.toggle('newFont');
});A cada clique, o classList.toggle() acrescenta a classe CSS se ela não existir no array classList e devolve true. Se a classe CSS existir, o método remove-a e devolve false.
const anotherClass = myText.classList.toggle('newSize');
console.log(anotherClass); // true --> a classe foi acrescentadaTambém podes passar um booleano como segundo argumento opcional ao método classList.toggle(). A classe CSS será acrescentada ou removida consoante o resultado da avaliação desse segundo argumento:
const bool = false;
let firstToggle = myText.classList.toggle('newSize', bool);
console.log(firstToggle);
// false, 'newFont' já existe e será removida do array classList
let secondToggle = shadesEl.classList.toggle('newColor', !bool);
console.log(secondToggle);
// true, 'newColor' não existe e a classe será acrescentada.O método classList.toggle() permite acrescentar e remover classes CSS, existam elas ou não no teu array, com menos linhas de código.
Conclusão
A propriedade classList dá-te mais desempenho e mais possibilidades para modificar os teus elementos HTML e as suas classes CSS em JavaScript.
Para saberes mais, vê o artigo sobre como modificar o DOM em JavaScript.
