Atributo className do Elemento HTML DOM

Definição e Uso

className Definir ou retornar o atributo class do elemento.

Veja também:

Atributo classList do Elemento

Método getElementsByClassName() do Document

Objeto Style do HTML DOM

Exemplo

Exemplo 1

Definir o atributo class do elemento:

element.className = "myStyle";

Experimente pessoalmente

Exemplo 2

Obter o atributo class do "myDIV":

let value = document.getElementById("myDIV").className;

Experimente pessoalmente

Exemplo 3

Alternar entre dois nomes de classe:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

Experimente pessoalmente

Dica:Mais exemplos abaixo da página.

Sintaxe

Retornar o atributo className:

HTMLElementObject.className

Definir o atributo className:

HTMLElementObject.className = class

Valor de Atributo

Valor Descrição
class

Nome da classe do elemento.

Separe várias classes com espaços, por exemplo, "test demo".

Retorno

Tipo Descrição
String Classe do elemento, ou lista de classes separadas por espaço.

Mais exemplos

Exemplo 4

Obtenha a propriedade class do primeiro <div> elemento (se houver):

let value = document.getElementsByTagName("div")[0].className;

Experimente pessoalmente

Exemplo 5

Obtenha a propriedade class com várias classes:

<div id="myDIV" class="myStyle test example">
<p>Eu sou myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

Experimente pessoalmente

Exemplo 6

Substitua a propriedade class existente com a nova propriedade class:

element.className = "newClassName";

Experimente pessoalmente

Exemplo 7

Para adicionar uma nova classe sem substituir o valor existente, adicione um espaço e a nova classe:

element.className += " class1 class2";

Experimente pessoalmente

Exemplo 8

Se "myDIV" tiver a classe "myStyle", altere o tamanho da fonte:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

Experimente pessoalmente

Exemplo 9

Se você rolar 50 pixels da parte superior da página, adicionará a classe "test":

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

Experimente pessoalmente

Suporte do navegador

Todos os navegadores suportam element.className：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte

Páginas relacionadas

Tutorial de CSS:Sintaxe do CSS

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