¿Es posible hacer esto sin usar JQuery?
Me gustaría que un div cambiara el color de su sombra una vez que hice clic en él, y cuando vuelva a hacer clic en él, volverá a cambiar a su color original. Aquí está el código: http://jsfiddle.net/kqv7x5f8/5/
var btn = document.getElementById("btn"); function toShadow() { document.getElementById("btn").style.boxShadow = "5px 5px red" } #btn { height: 20px; border: 2px solid black; box-shadow: 5px 5px black; } <div id="btn" onclick="toShadow"> click to change shadow; click again to change back </div>¡Gracias!
En este caso, es mejor alternar una clase usando classList.toggle()
const button = document.getElementById('btn'); button.addEventListener('click', e => e.currentTarget.classList.toggle('shadow')); #btn { height: 20px; border: 2px solid black; } .shadow { box-shadow: 5px 5px black; } <div id="btn"> click to change shadow; click again to change back </div>Puede hacer uso de un booleano con una declaración if/else para este problema
var btn = document.getElementById("btn"); var isRed = false; function toShadow(){ if(isRed){ btn.style.boxShadow ="5px 5px black" isRed = false; } else { btn.style.boxShadow ="5px 5px red" isRed = true; } }