Semelhante ao método style, o método className tem a função de alterar o estilo de um objeto definido por uma classe CSS.
A vantagem do método className é que podemos alterar as propriedades do estilo na folha de estilo vinculada à página, ou seja, não precisamos alterar o script quando desejarmos alterar o estilo e sim as propriedades da classe CSS.
Vejamos o mesmo exemplo de ocultar e exibir um objeto na página Método: className.
Observe o script:
function showHide(id) {
var obj = document.getElementById(id);
if(obj.className == "") {
obj.className = "ocultaObj";
} else {
obj.className = "";
}
}
O script acima tem a mesma característica e função do script apresentado no método style, diferenciando-se apenas pela troca de método, ou seja, ao invés de utilizarmos o método style, utilizamos className.
A classe utilizada (ocultaObj) é tão simples quanto o script. Vejamos:
.ocultaObj {
display: none;
}
Como dito no início desta unidade, o método className é mais vantajoso do que o style porque nos possibilita alterar o estilo sem alterar o script, ou seja, basta modificarmos as propriedades da classe utilizada.
Assim, suponhamos que ao invés de ocultar e exibir o objeto utilizando a propriedade display, queremos utilizar a propriedade visibility. Para isso iremos alterar o script? Não, simplesmente alteramos a propriedade da classe ocultaObj assim:
.ocultaObj {
visibility: hidden;
}
Vejamos o exemplo novamente com a propriedade da classe alterada na página Método: className (2º).