logo javascript

Aprenda javascript com facilidade do zero

Prof. Ivan Lourenço Gomes

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)";
    };


                    
                

Índice de Aulas