O Element.classList é uma propriedade somente leitura que retorna uma coleção DOMTokenList ativa dos atributos de classe do elemento.
Usar classList é uma alternativa conveniente para acessar a lista de classes de um elemento como uma seqüência delimitada por espaço através de element.className.
Sintaxe
const elementClasses = elementNodeReference.classList;
elementClasses é um DOMTokenList que representa o atributo de classe de elementNodeReference. Se o atributo de classe não foi definido ou está vazio elementClasses.length retorna 0. element.classList propriamente dito é somente leitura, embora você possa modificá-lo usando os métodos add () e remove ().
Métodos
- add( String [, String] )
- Adicione valores de classe especificados. Se essas classes já existem no atributo do elemento, elas são ignoradas.
- remove( String [,String] )
- Remover valores de classe específicos.
- item ( Number )
- Retorna o valor da classe por índice na coleção.
- toggle ( String [, force] )
- Quando apenas um argumento está presente: Toggle class value; Ou seja, se a classe existir, em seguida, removê-lo e retornar false, se não, então adicioná-lo e retornar true.
Quando um segundo argumento está presente: Se o segundo argumento é avaliado como true, adicione o valor especificado da classe e, se ele for avaliado como false, remova-o. - contains( String )
- Verifica se o valor da classe especificado existe no atributo de classe do elemento.
Exemplos
// div é uma referência de objeto para um elemento <div> com class = "foo bar"
div.classList.remove("foo");
div.classList.add("anotherclass");
// Se estiver visível, remova-o, caso contrário, adicione-o
div.classList.toggle("visible");
// adicionar/remover, dependendo do teste condicional, i menos de 10
div.classList.toggle("visible", i < 10 );
alert(div.classList.contains("foo"));
// adicionar ou remover várias classes
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
As versões do Firefox antes de 26 não implementam o uso de vários argumentos nos métodos add / remove / toggle. Veja https://bugzilla.mozilla.org/show_bug.cgi?id=814014
Especificações
| Especificações | Status | Comentário |
|---|---|---|
| HTML Living Standard The definition of 'Element.classList' in that specification. |
Padrão em tempo real | Observe dentro da especificação HTML relacionada ao class attribute. |
| DOM The definition of 'Element.classList' in that specification. |
Padrão em tempo real | Definição inicial |
| DOM4 The definition of 'Element.classList' in that specification. |
Obsoleto |
Compatibilidade do navegador
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Basic support | 8.0 | (Yes)[3] | 3.6 (1.9.2) | 10[1][3] | 11.50 | 5.1 |
| toggle method's second argument | 24 | (Yes) | 24 (24) | Não suportado[2] | 15 | 5.1 |
| Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 3.0 | (Yes) | 1.0 (1.9.2) | 10 | 11.10 | 5.0 |
| toggle method's second argument | ? | ? | 24.0 (24) | ? | ? | ? |
[1] Não suportado para elementos SVG. Veja a report at Microsoft about that.
[2] O Internet Explorer nunca implementou isso. Veja a report at Microsoft about that.
[3] Internet Explorer usa apenas o primeiro parâmetro em "add" e "remove".