tutoriais mais recente desenvolvimento web
 

HTML DOM className Propery

<Elemento de objeto

Exemplo

Defina a classe para um <div> elemento com id = "myDiv":

document.getElementById("myDIV").className = "mystyle";
Tente você mesmo "

Mais "Try it Yourself" exemplos abaixo.

Definição e Uso

O nome da classe conjuntos de propriedades ou retorna o nome da classe de um elemento (o valor do atributo de classe de um elemento).

Dica: Uma propriedade similar ao className é a classList propriedade.

Suporte navegador

Propriedade
className sim sim sim sim sim

Sintaxe

Devolver a propriedade className:

HTMLElementObject .className

Defina a propriedade className:

HTMLElementObject .className= class

Valores de propriedade

Valor Descrição
class Especifica o nome da classe de um elemento. Para aplicar várias classes, separe-os com espaços, como "test demo"

Detalhes técnicos

Valor de retorno: Uma cadeia, representando a classe, ou uma lista separada por espaços de aulas, de um elemento
Exemplos

mais Exemplos

Exemplo

Obter o nome da classe do primeiro <div> elemento no documento (if any) :

var x = document.getElementsByTagName("DIV")[0].className;

O resultado x será:

mystyle
Tente você mesmo "

Exemplo

Outros exemplos sobre como obter o nome da classe de um elemento:

var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Tente você mesmo "

Exemplo

Obter os nomes de classe de um elemento com várias classes:

<div id="myDIV" class="mystyle test example">I am a DIV element</div>

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

O resultado x será:

mystyle text example
Tente você mesmo "

Exemplo

Sobrescrever um nome de classe existente com um novo:

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

document.getElementById("myDIV").className = "newClassName";
Tente você mesmo "

Exemplo

Para adicionar uma classe a um elemento, sem substituir valores existentes, inserir um espaço e o nome da nova classe:

document.getElementById("myDIV").className += " anotherClass";
Tente você mesmo "

Exemplo

Se há uma classe de "mystyle" em um elemento com id = "myDiv", mudar a sua font-size:

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

if (x.className === "mystyle") {
    x.style.fontSize = "30px";
}
Tente você mesmo "

Exemplo

Alternar entre os nomes de classe em diferentes posições de rolagem - Quando o usuário rola para baixo 50 pixels a partir do topo, o nome da classe "test" será adicionado a um elemento (and removed when scrolled up again) .

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50) {
        document.getElementById("myP").className = "test";
    } else {
        document.getElementById("myP").className = "";
    }
}
Tente você mesmo "

Páginas relacionadas

Tutorial CSS: CSS Seletores

Referência CSS: CSS .class Selector

HTML DOM Referência: HTML DOM classList Property

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

HTML DOM Referência: HTML DOM estilo de objeto

<Elemento de objeto