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 el siguiente código para aplicar la sort-select-active al div con id sort-select :
var selected = false; var select= document.getElementById('sort-select') select.onclick = (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; } <div id="sort-contain"> <div id="sort-select"> Selected </div> </div>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 especificidad más alta. Cambie el selector #sort-select por una class en su CSS, o use un estilo en línea como este:
var selected = false; select.onclick = (e) => { selected = !selected; if (selected) slect.style.backgroundColor ="gray" else slect.style.backgroundColor ="lightgray" }; También podría usar la palabra clave !important , así:
.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>