Estoy tratando de crear un menú de selección y quiero cambiar el color de fondo de un botón cuando se hace clic en él. Estoy usando este código:
#sort-select { background-color: lightgray; } .sort-select-active { background-color: grey; } <div id="sort-contain"> <div id="sort-select"> Selected </div> </div> Y trato de aplicar la sort-select-active a mi div sort-select usando este código JS:
var selected = false; select.onclick = (e) => { selected = !selected; if (selected) select.classList.add("sort-select-active"); else select.classList.remove("sort-select-active"); };La clase se agrega correctamente al elemento, pero el color de fondo no cambia. ¿Hay algún conflicto entre los diferentes colores de fondo definidos?
Establece un background-color través de una id , luego establece otro a través de una class , el primero siempre se aplicará, porque tiene una prioridad más alta. Cambie la identificación #sort-select por una clase, o use estilos en línea como este:
var selected = false; select.onclick = (e) => { selected = !selected; if (selected) slect.style.backgroundColor ="gray" else slect.style.backgroundColor ="lightgray" }; o agregue !important como esta:
.sort-select-active { background-color: grey!important; }Mira esto. ¡Agregué !important en la clase css
var select = document.getElementById("sort-select") var selected = false; select.addEventListener("click", (e) => { selected = !selected; if (selected) { select.classList.add("sort-select-active"); } else { select.classList.remove("sort-select-active"); } }); #sort-select { background-color: lightgray; } .sort-select-active { background-color: grey !important; } <div id="sort-contain"> <div id="sort-select"> Selected </div> </div>