Elemento HTML DOM className
❮ O Objeto ElementoExemplo
Defina o atributo de classe para um elemento:
element.className = "myStyle";
Obtenha o atributo de classe de "myDIV":
let value = document.getElementById("myDIV").className;
Alterne entre dois nomes de classe:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Mais exemplos abaixo.
Definição e uso
A classNamepropriedade define ou retorna o atributo de classe de um elemento.
Sintaxe
Retorne a propriedade className:
HTMLElementObject.className
Defina a propriedade className:
HTMLElementObject.className = class
Valores de propriedade
| Value | Description |
| class |
The class name(s) of an element. Separate multiple classes with spaces, like "test demo". |
Valor de retorno
| Type | Description |
| String | The class, or a space-separated list of classes, of an element |
Mais exemplos
Obtenha o atributo class do primeiro elemento <div> (se houver):
let value = document.getElementsByTagName("div")[0].className;
Obtenha um atributo de classe com várias classes:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Substitua um atributo de classe existente por um novo:
element.className = "newClassName";
Para adicionar novas classes, sem substituir os valores existentes, adicione um espaço e as novas classes:
element.className += " class1 class2";
se "myDIV" tiver uma classe "myStyle", altere o tamanho da fonte:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Se você rolar 50 pixels do topo desta página, a classe "teste" será adicionada:
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Suporte ao navegador
element.className é suportado em todos os navegadores:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | Yes | Yes | Yes | Yes | Yes |
❮ O Objeto Elemento