3

É possível executar comandos CSS em javascript?

Exemplo, se eu clicasse em um botão, a cor dele alteraria?

2 Respostas 2

5

Claro que sim, praticamente tudo o que acontece no DOM consegue controlar/manipular com javascript:

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    this.style.backgroundColor = 'green';
})
#btn {
   background-color: red; 
}
<button id="btn">CLICA AQUI</button>

Pode delegar o evento no html, neste caso é o onclick que é a sintaxe do evento click como atributo de html:

function change_color(ele) {
    ele.style.backgroundColor = 'green'; 
}
button {
   background-color: red; 
}
<button onclick="change_color(this);">CLICA AQUI</button>
<button onclick="change_color(this);">CLICA AQUI</button>
<button onclick="change_color(this);">CLICA AQUI</button>

Ou, muitas vezes isto é da minha preferência, podemos adicionar/remover as classes que estilizam os elementos:

var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
    var btn = document.getElementById("btn");
    if(btn.classList.contains('green')) {
       btn.className = "";
       return;
    }
    btn.className = "green";
})
button {
   background-color: red; 
}
.green {
  background-color: green;
}
<button id="btn">CLICA AQUI</button>

Nestes casos o unico elemento/atributo manipulado é o do botão/cor do fundo.

Isto são meros exemplos, básicos, que que lhe podem dar uma ideia das possiblidades (tudo que faz nos css pode fazer em js, e mais ainda).

-1

Com esses recursos, é possível então controla itens de menus e submenus, criados com UL e LI, devidamente identificados por classes? Se quiserem anexar um pequeno exemplo, ficaria grato, sou iniciante na área.

Obrigado.

1
  • Vitor e Miguel, primeiramente lhes peço desculpa pela demora em responder, acabei dando um tempo no meu aprendizado e esqueci que havia postado aqui. Obrigado pela ajuda, estou recomeçando os estudos e as dicas que postaram serão meu ponto de partida. 27/11/2018 às 22:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .