Propriedade classList do Elemento DOM HTML

Definição e uso

classList A propriedade retorna o nome da classe do elemento.

classList A propriedade retorna DOMTokenList.

Exemplo

Exemplo 1

Adicionar a classe "myStyle" ao elemento:

const list = elemento.classList;
list.add("myStyle");

Experimente você mesmo

Exemplo 2

Remover a classe "myStyle" do elemento:

const list = elemento.classList;
list.remove("myStyle");

Experimente você mesmo

Exemplo 3

Alternar o estado de aberto/fechado de "myStyle":

const list = elemento.classList;
list.toggle("myStyle");

Experimente você mesmo

Dica:Mais exemplos estão disponíveis na parte inferior da página.

Sintaxe

elemento.classList

Retorno

Tipo Descrição
Objeto DOMTokenList. Lista de nomes de classes do elemento.

Notas:A propriedade classList é apenas leitura, mas você pode usar os métodos listados abaixo para adicionar, alternar ou remover classes da lista:

Propriedades e métodos classList

Nome Descrição
add() Adiciona um ou mais tokens à lista.
contains() Retorna true se a lista contiver classes.
entries() Retorna um iterador com pares de chave/valor da lista.
forEach() Executa uma função de callback para cada token na lista.
item() Retorna o token no índice especificado.
keys() Retorna um iterador com as chaves da lista.
length Retorna o número de tokens na lista.
remove() Remove um ou mais tokens da lista.
replace() Substitui o token na lista.
supports() Retorna true se o token é um dos suportados pelo atributo.
toggle() Alternar entre os tokens da lista.
value Retorna a lista de tokens como string.
values() Retorna um iterador com os valores da lista.

Mais exemplos

Exemplo 4

Adicionar várias classes ao elemento:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Experimente você mesmo

Exemplo 5

Remover várias classes do elemento:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Experimente você mesmo

Exemplo 6

Quantas classes o elemento tem?

let numb = element.classList.length;

Experimente você mesmo

Exemplo 7

Obter o nome da classe do elemento "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Eu sou myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Experimente você mesmo

Exemplo 8

Obter a primeira classe do elemento:

let className = element.classList.item(0);

Experimente você mesmo

Exemplo 9

O elemento tem a classe "myStyle"?

let x = element.classList.contains("myStyle");

Experimente você mesmo

Exemplo 10

Se o elemento tiver a classe "myStyle", remova "anotherClass":

if (element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Experimente você mesmo

Exemplo 11

Alternar entre classes para criar um botão desdobrável:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Experimente você mesmo

Exemplo 12

Crie uma navegação adesiva:

// Obtenha a barra de navegação
const navbar = document.getElementById("navbar");
// Obtenha a posição de deslocamento da barra de navegação
const sticky = navbar.offsetTop;
// Adicione a classe sticky à barra de navegação quando você alcançar sua posição de rolagem
// Remova a classe sticky ao sair da posição de rolagem
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Experimente você mesmo

Suporte do navegador

Todos os navegadores suportam element.classList:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte 9-11 Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial do CSS:Sintaxe do CSS

Manual de referência do CSS:Seletor .class do CSS

Objeto DOMTokenList

Propriedade className

Método getElementsByClassName()

Objeto Style do HTML DOM