HTML DOM classList Propery

<Elemento de objeto

Exemplo

Adicione o "mystyle" classe para um <div> elemento:

document.getElementById("myDIV").classList.add("mystyle");

Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

A propriedade classList retorna a classe name(s) de um elemento, como um objecto DOMTokenList.

Esta propriedade é útil para adicionar, remover e alternar classes CSS em um elemento.

A propriedade classList é só de leitura, no entanto, você pode modificá-lo usando o add() e remove() métodos.

Solução cross-browser: A propriedade classList não é suportado no IE9 e anteriores. No entanto, você pode usar o className propriedade ou expressões regulares para uma solução cross-browser (ver "More Examples" na parte inferior desta página).

Suporte navegador

Os números na tabela especificar a primeira versão do navegador que suporta totalmente a propriedade.

Propriedade
classList	8	10.0	3,6	5.1	11,5

Sintaxe

element .classList

propriedades

Propriedade	Descrição
length	Retorna o número de classes na lista. Esta propriedade é somente leitura

Métodos

Método	Descrição
add( class1, class2, ... )	Adiciona um ou mais nomes de classe a um elemento. Se a classe especificada já existir, a classe não será adicionado
contains( class )	Retorna um valor booleano, que indica se um elemento tem o nome da classe especificada. Valores possíveis: verdadeiro - o elemento contém o nome da classe especificada falsa - o elemento não contém o nome da classe especificada
item( index )	Retorna o nome da classe com um número de índice especificado a partir de um elemento. Índice começa em 0. Retorna null se o índice está fora do intervalo
remove( class1, class2, ... )	Remove um ou mais nomes de classe de um elemento. Nota: A remoção de uma classe que não existe, não lança um erro
toggle( class, true\|false)	Alterna entre um nome de classe para um elemento. O primeiro parâmetro remove a classe especificada de um elemento, e retorna falso. Se a classe não existe, ele é adicionado ao elemento, e o valor de retorno é verdade. O segundo parâmetro opcional é um valor booleano que obriga a classe a ser adicionado ou removido, independentemente de haver ou não ele já existia. Por exemplo: Remover uma classe: Elemento .classList. toggle("classToRemove", false) ; Adicionar uma classe: Elemento .classList. toggle("classToAdd", true) ; Nota: O segundo parâmetro não é suportado no Internet Explorer ou Opera 12 e anteriores.

Detalhes técnicos

Valor de retorno:	Um DOMTokenList, que contém uma lista da classe name(s) de um elemento

mais Exemplos

Exemplo

Adicionar várias classes para um <div> elemento:

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

Tente você mesmo "

Exemplo

Remover uma classe de um <div> elemento:

document.getElementById("myDIV").classList.remove("mystyle");

Tente você mesmo "

Exemplo

Remover várias classes de um <div> elemento:

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

Tente você mesmo "

Exemplo

Alternar entre duas classes para um <div> elemento:

document.getElementById("myDIV").classList.toggle("newClassName");

Tente você mesmo "

Exemplo

Obter a classe name(s) de um <div> elemento:

<div id="myDIV" class="mystyle anotherClass thirdClass">I am a DIV element</div>

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

O resultado x será:

mystyle anotherClass thirdClass

Tente você mesmo "

Exemplo

Descubra quantos nomes de classe um <div> elemento tem:

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

O resultado x será:

Tente você mesmo "

Exemplo

Obter o primeiro nome da classe (index 0) de um <div> elemento:

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

O resultado x será:

mystyle

Tente você mesmo "

Exemplo

Descobrir se um elemento tem um "mystyle" class:

var x = document.getElementById("myDIV").classList.contains("mystyle");

O resultado x será:

true

Tente você mesmo "

Exemplo

Descobrir se um elemento tem um "mystyle" classe. Se assim for, remova outro nome da classe:

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
x.classList.remove("anotherClass");
} else {
alert("Could not find it.");
}

Tente você mesmo "

Exemplo

Alternar entre as classes para criar um botão drop-down:

// Get the button, and when the user clicks on it, execute myFunction
document.getElementById("myBtn").onclick = function() {myFunction()};

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {

    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
}
}

Tente você mesmo "

Exemplo fallback: adicionar

Uma solução cross-browser quando utilizar o classList. add() método, para IE9 e anterior:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.add("mystyle");
} else {
x.className = "mystyle"; // For IE9 and earlier
}

Tente você mesmo "

Exemplo de reversão: remover

Uma solução cross-browser quando utilizar o classList. remove() método, para IE9 e anterior:

var x = document.getElementById("myDIV");

if (x.classList) {
x.classList.remove("mystyle");
} else {
x.className = x.className.replace(/\bmystyle/g, ""); // For IE9 and earlier
}

Tente você mesmo "

Exemplo de reversão: contém

Uma solução cross-browser quando utilizar o classList. contains() método, para IE9 e anterior:

var x = document.getElementById("myDIV");

if (x.classList) {
alert(x.classList.contains("mystyle"));
} else {
alert(/\bmystyle/g.test(x.className)); // For IE9 and earlier
}

Tente você mesmo "

Exemplo de reversão: alternância

Uma solução cross-browser quando utilizar o classList. toggle() método, para IE9:

var x = document.getElementById("myDIV");

if (x.classList) {
    x.classList.toggle("mystyle");
} else {
    // For IE9
    var classes = x.className.split(" ");
    var i = classes.indexOf("mystyle");

    if (i >= 0)
        classes.splice(i, 1);
    else
        classes.push("mystyle");
        x.className = classes.join(" ");
}

Tente você mesmo "