Resumo : neste tutorial você aprenderá como usar a classList
propriedade JavaScript para trabalhar com as classes CSS de um elemento.
Introdução à classList
propriedade JavaScript
A classList
é uma propriedade somente leitura de um elemento que retorna uma coleção ativa de classes CSS:
const classes = element.classList;
Linguagem de código: JavaScript ( javascript )
O classList
é um DOMTokenList
objeto que representa o conteúdo do atributo de classe do elemento.
Mesmo que classList
seja somente leitura, você pode manipular as classes que ele contém usando vários métodos.
classList
Exemplos de JavaScript
Vejamos alguns exemplos de manipulação de classes CSS do elemento por meio da classList
interface do .
1) Obtenha as classes CSS de um elemento
Suponha que você tenha um div
elemento com duas classes: main
e red
.
<div id="content" class="main red">JavaScript classList</div>
Linguagem de código: HTML, XML ( xml )
O código a seguir exibe a lista de classes do div
elemento na janela Console:
let div = document.querySelector('#content');
for (let cssClass of div.classList) {
console.log(cssClass);
}
Linguagem de código: JavaScript ( javascript )
Saída:
main
red
Como funciona:
- Primeiro, selecione o
div
elemento com o idcontent
usando oquerySelector()
método. - Em seguida, itere sobre os elementos
classList
e mostre as classes na janela Console.
2) Adicione uma ou mais classes à lista de classes de um elemento
Para adicionar uma ou mais classes CSS à lista de classes de um elemento, você usa o add()
método do classList
.
Por exemplo, o código a seguir adiciona a info
classe à lista de classes do div
elemento com o id content
:
let div = document.querySelector('#content');
div.classList.add('info');
Linguagem de código: JavaScript ( javascript )
O exemplo a seguir adiciona várias classes CSS à lista de classes de um elemento:
let div = document.querySelector('#content');
div.classList.add('info','visible','block');
Linguagem de código: JavaScript ( javascript )
3) Remova as classes do elemento
Para remover uma classe CSS da lista de classes de um elemento, você usa o remove()
método:
let div = document.querySelector('#content');
div.classList.remove('visible');
Linguagem de código: JavaScript ( javascript )
Assim como o add()
método, você pode remover várias classes de uma vez:
let div = document.querySelector('#content');
div.classList.remove('block','red');
Linguagem de código: JavaScript ( javascript )
4) Substitua uma classe de um elemento
Para substituir uma classe CSS existente por uma nova, você usa o replace()
método:
let div = document.querySelector('#content');
div.classList.replace('info','warning');
Linguagem de código: JavaScript ( javascript )
5) Verifique se um elemento possui uma classe especificada
Para verificar se o elemento possui uma classe especificada, você usa o contains()
método:
let div = document.querySelector('#content');
div.classList.contains('warning'); // true
Linguagem de código: JavaScript ( javascript )
O contains()
método retorna true
se classList
contiver uma classe especificada; de outra forma false
.
6) Alternar uma aula
Se a lista de classes de um elemento contém um nome de classe especificado, o método toggle() o remove. Se a lista de classes não contém o nome da classe, o método toggle() o adiciona à lista de classes.
O exemplo a seguir usa o toggle()
método para alternar a visible
classe de um elemento com o id content
:
let div = document.querySelector('#content');
div.classList.toggle('visible');
Linguagem de código: JavaScript ( javascript )
Resumo
- A propriedade do elemento
classList
retorna a coleção ativa de classes CSS do elemento. - Use
add()
eremove()
para adicionar e remover classes CSS da lista de classes de um elemento. - Use
replace()
o método para substituir uma classe existente por uma nova. - Use
contains()
o método para verificar se a lista de classes de um elemento contém uma classe especificada. - Use o
toggle()
método para alternar uma classe.