Web Sites com Ajax

Método className

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º).

• « Método: style
• |
• Método: innerHTML »