JavaScript Básico

Alterar uma propriedade CSS com JS

Com o JS é possível alterar propriedades de um elemento. No exemplo abaixo o JS é usado ocultar e mostrar um elemento de página, ao alterar seu CSS pela propriedade display.

O código abaixo oculta o elemento com id "muda"

O código abaixo mostra o elemento com id "muda"

Na prática a propriedade CSS display foi alterada para "none" e fez o parágrafo sumir. Para o parágrafo voltar a aparecer, o valor passou para "block".

Alterar o conteúdo do HTML com JS

O JS também permite alterar um determinado conteúdo. Por exemplo o conteúdo do título abaixo <h2> pode ser alterado preenchendo o campo indicado.

O resultado acima é obtido usando HTML e JS. No HTML estabelecemos um título <h2>, um campo de entrada de texto <input type="text"> e botões <button> da seguinte maneira:

<h2 id= "escreve">Alterar o conteúdo do HTML com JS</h2>
<label>Novo título: </label> <input type ="text" id = "nome">
<button onclick ="return escreveH()">Enviar</button>
<button onclick ="return reiniciaH()">Reiniciar</button>

Em seguida, ao final da página HTML adicionamos o seguinte código em JavaScript:

<script>
   var texto;
   function escreveH(){
     texto = document.getElementById("nome").value;
     if (texto == ""){
       alert("o texto está vazio");
     }
     else {
       document.getElementById("nome").innerHTML = texto;
     }
   }
   function reiniciaH(){
    document.getElementById("nome").innerHTML = "Alterar o conteúdo do HTML com JS";
   }
</script>

Notamos que para cada um dos botões uma função foi criada. Para o botão "Enviar" temos a função "escreveH" que é responsável por ler o texto do <input> e enviar para o <h2>.

Já o botão "Reiniciar" emprega a função "reiniciaH", que atribui o texto "Alterar o conteúdo do HTML com JS" ao <h2>.

Destacamos também o uso de uma condição (if/else). A condição estabelece que se o texto estiver vazio ( if (texto == "") ), manda um alerta comunicando que o campo não foi preenchido. Do contrário (else) a função escreve o texto preenchido no <h2>.

A seleção do elemento HTML se dá pela propriedade document.getElementById() que localiza o elemento a partir do id atribuído a ele. No exemplo, o id atribuído foi "nome".

Já para escrever sobre o conteúdo de uma tag, utiliza-se o comando .innerHTML. O comando foi empregado para sobrescrever um conteúdo pré-existente.

Alterando propriedades em tempo real

Uma das possibilidades que o JS oferece é alterar uma propriedade de um elemento HTML ou CSS em tempo real. Abaixo vemos um exemplo em que os sliders HTML (<input type="range'>) são usados para pegar valores RGB e aplicar no fundo (background-color) da <div>.

No HTML cada slider controla valores de 0 a 255. Depois cada valor é capturado e processado pelo JS. Um retorno imediato ocorre na legenda do valor ao lado do slider que fica à sua direita. Outro retorno é a aplicação dos valores no código RGB. O código JS fica assim:

<script>
var slideR  = document.getElementById("corR");
var slideG  = document.getElementById("corG");
var slideB  = document.getElementById("corB");

var printR  = document.getElementById("valR");
var printG  = document.getElementById("valG");
var printB  = document.getElementById("valB");

printR.innerHTML = slideR.value;
printG.innerHTML = slideG.value;
printB.innerHTML = slideB.value;

var corRGB = 'rgb'(' + slideR.value  +   ',' + slideG.value  +  ','  + slideB.value  +  ')';

atualCor();

function() atualCor(){
   corRGB = 'rgb'(' + slideR.value  +   ',' + slideG.value  +  ','  + slideB.value  +  ')';
   document.getElementById("meuBox").style.backgroundColor =  corRGB;
   }

slideR.oninput =  function(){
   printR.innerHTML = this.value;
   atualCor();
   }

slideG.oninput =  function(){
   printR.innerHTML = this.value;
   atualCor();
   }

slideB.oninput =  function(){
   printR.innerHTML = this.value;
   atualCor();
   }      
</script>