Manipulação do CSS
Podemos manipular o CSS de qualquer elemento da página via javascript. Para fazer isso usamos a propriedade style do objeto em questão. A propriedade style é um objeto cujas propriedades são as propriedades CSS. Veja o código a seguir:
<button id="botao_cor">Clique para mudar de cor e mover para a direita</button>
document.getElementById("botao_cor").onclick = function() {
document.getElementById("botao_cor").style['background-color'] = "purple";
document.getElementById("botao_cor").style.transform = "translateX(100px)";
};
/* temos que usar a notação com colchetes com o background-color
porque o nome da propriedade contém um traço. Falamos isso na aula sobre objetos. */
O código acima pode ser simplificado, pois estamos definindo uma função para o evento onclick do elemento "botao_cor". Dentro da função, queremos alterar o CSS dele próprio, portanto podemos usar a keyword this para referenciá-lo.
document.getElementById("botao_cor").onclick = function() {
this.style['background-color'] = "purple";
this.style.transform = "translateX(100px)";
};
// Outra maneira de simplificar usando uma variável:
var botao = document.getElementById("botao_cor");
botao.onclick = function() {
botao.style['background-color'] = "purple";
botao.style.transform = "translateX(100px)";
};