Objeto do JavaScript

Manual de referência do JavaScript

Manual de referência do DOM JS

Objeto History do JavaScript Objeto Elemento DOM HTML

Propriedade classList do HTML DOM

classListA propriedade somente leitura retorna a coleção real-time DOMTokenList da propriedade class do elemento.

A propriedade classList é muito útil para adicionar, remover e alternar classes CSS em elementos.

Essa propriedade é somente leitura, mesmo que você possa modificá-la usando os métodos add() e remove().

Usar classList é um método conveniente que podeclassNameAcesse a lista de classes do elemento com uma string separada por espaços.

Sintaxe:

element.classList

Exemplo

var elem = document.getElementById("x");
elem.classList.add("para");

Teste e veja‹/›

Compatibilidade do navegador

O número na tabela especifica a primeira versão do navegador que suporta completamente a propriedade classList:

Atributo
classList	8	3.6	É	5.1	10

Propriedade

Atributo	Descrição
length	Retorne o número de classes na lista.

Método

Método	Descrição
add(class1, class2, ...)	Adicione uma ou mais classes a um elemento. Se a classe especificada já existir na propriedade class do elemento, essa classe não será adicionada.
contains(class)}}	Verifique se o valor da classe especificado existe na propriedade class do elemento. Valores possíveis: true-O elemento contém o nome da classe especificado false-O elemento não contém o nome da classe especificado.
item(index)}}	Retorne o valor da classe pelo índice da coleção. O índice começa em 0. Se o índice estiver fora do intervalo, será retornadonull.
remove(class1, class2, ...)	Remova uma ou mais classes de um elemento. Atenção:Remover classes inexistentes não causará erro.
replace(oldClass, newClass)}}	Substituir as classes existentes com novas classes.
toggle(class, true\|false)	Alternar entre os nomes das classes do elemento. Quando há apenas um parâmetro: alternar o valor da classe; caso contrário, retornar 0. Isso é, se a classe existir, removê-la e retornar false, se não existir, adicioná-la e retornar true. Quando existe um segundo parâmetro opcional: se o valor do segundo parâmetro for true, adiciona o valor da classe especificada; se o valor do segundo parâmetro for false, remove-o. Exemplo: 　　　　　 Remover uma classe:elemento .classList.toggle（"classToRemove", false）; 　 Adicionar uma classe:elemento .classList.toggle（"classToAdd", true）;

Detalhes técnicos

Retorno:	DOMTokenList, contendo a lista de nomes das classes do elemento
Versão DOM:	Nível DOM1

Mais exemplos

Adicionar várias classes ao elemento :

Exemplo

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Teste e veja‹/›

Remover uma classe do elemento :

Exemplo

var elem = document.getElementById("x");
elem.classList.remove("para");

Teste e veja‹/›

Remover várias classes do elemento :

Exemplo

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Teste e veja‹/›

Alternar entre duas classes do elemento :

Exemplo

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Teste e veja‹/›

Retornar o nome das classes que o elemento possui:

Exemplo

var len = document.getElementById("x").classList.length;

Teste e veja‹/›

Retornar o nome das classes do elemento :

Exemplo

var name = document.getElementById("x").classList;

Teste e veja‹/›

Retornar o nome da primeira classe do elemento (índice 0):

Exemplo

var name = document.getElementById("x").classList[0];

Teste e veja‹/›

Usar o método item() para retornar o nome da primeira classe do elemento (índice 0):

Exemplo

var name = document.getElementById("x").classList.item(0);

Teste e veja‹/›

Verificar se o elemento possui a classe "shadow":

Exemplo

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("Yes!!! The P element contains'shadow'class");
} else {
alert("No'shadow'class found");　　　
}

Teste e veja‹/›

Alternar uma classe ("open") para criar botões de navegação lateral:

Referências Relacionadas

Tutorial CSS:Seletor CSS

Referência CSS:CSS#idSeletor

Referência CSS: CSS .class Seletor

Referência DOM HTML:Propriedade className DOM HTML

Referência DOM HTML:Método getElementsByClassName() DOM HTML

Referência DOM HTML:Método getElementById() DOM HTML

Referência DOM HTML:Método querySelector() DOM HTML

Objeto Elemento DOM HTML

Objeto History do JavaScript Objeto Elemento DOM HTML