É possível executar comandos CSS em javascript?
Exemplo, se eu clicasse em um botão, a cor dele alteraria?
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).
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.