Lista de classes JavaScript

Resumo : neste tutorial você aprenderá como usar a classListpropriedade JavaScript para trabalhar com as classes CSS de um elemento.

Introdução à classListpropriedade 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 DOMTokenListobjeto que representa o conteúdo do atributo de classe do elemento.

Mesmo que classListseja somente leitura, você pode manipular as classes que ele contém usando vários métodos.

classListExemplos de JavaScript

Vejamos alguns exemplos de manipulação de classes CSS do elemento por meio da classListinterface do .

1) Obtenha as classes CSS de um elemento

Suponha que você tenha um divelemento com duas classes: maine 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 divelemento 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 divelemento com o id contentusando o querySelector()método.
• Em seguida, itere sobre os elementos classListe 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 infoclasse à lista de classes do divelemento 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'); // trueLinguagem de código:  JavaScript  ( javascript )

O contains()método retorna truese classListcontiver 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 visibleclasse 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 classListretorna a coleção ativa de classes CSS do elemento.
• Use add()e remove()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.