Web Sites com Ajax

Método style

O método style tem por objetivo alterar o estilo de um objeto. É algo idêntico ao atributo style do HTML, a diferença é que o estilo ao objeto será acrescido ou alterado via script e não na marcação HTML.

Por exemplo, vamos supor que queremos ocultar um objeto quando esse estiver visível e torná-lo visível novamente quando estiver oculto. Para isso podemos utilizar a propridade display das CSS com o valor none e block respectivamente, em conjunto com o método style.

Vejamos o referido exemplo na página Método style.

Agora vamos observar o script utilizado:

function showHide(id) {
 var obj = document.getElementById(id);
 if(obj.style.display == "") {
  obj.style.display = "none";
 } else {
  obj.style.display = "";
 }
}


A função showHide(id) recebe o id do objeto que será o alvo do script. Esse id é atribuido ao método getElementById que, por sua vez, é utilizado na variável obj.

Em seguinda, verificamos se o valor da propriedade display está como padrão (block). Se realmente estiver, a alteramos para o valor none, o que ocultará o objeto. Caso o objeto esteja oculto, ou seja, com o valor none, ele volta para o valor padrão block. Dessa forma, ocultamos e exibimos o objeto como desejado.

Essa função pode ser utilizada de forma contrária, ou seja, você pode ocultar o objeto via CSS e utilizar esse script para exibir e ocultar.

Nesse caso o script ficaria assim:

function showHide(id) {
 var obj = document.getElementById(id);
 if(obj.style.display == "") {
  obj.style.display = "block";
 } else {
  obj.style.display = "";
 }
}


• « Método: getElementsByTagName
• |
• Método: className »