Tengo un conjunto de botones en una página html de la siguiente forma:
<button id="testID" mat-mini-fab ngClass="list-button" (click)="onClick($event)" > Press </button>Intento cambiar el color de cada botón que pertenece a la clase .list-button después de hacer clic en él usando el siguiente código css:
.list-button:focus { background-color: #7d698d; }Sin embargo, aunque el color del botón en el que hago clic cambia cada vez (el color de todos los botones en los que se hizo clic anteriormente también vuelve a su color original). ¿Cómo podría arreglarlo? Quiero que todos los botones en los que se hizo clic permanezcan en su nuevo color.
También intenté asignar una identificación a los botones de esta clase y cambiar su color dentro del método onClick() de la siguiente manera sin éxito. El mismo problema permanece. ¿Usted me podría ayudar por favor?
onclick(event: any) { const btn = document.getElementById('testID'); if (btn) btn.style.backgroundColor = '#7d698d'; }No hay necesidad de js. Use el selector de focus en su hoja de estilo.
El selector
:focusestá permitido en elementos que aceptan eventos de teclado u otras entradas del usuario.
~ W3
button.list-button:focus { background-color: #7d698d; color: white; } <button class="list-button">Click</button> Editar ~ con js. Este método utiliza .querySelectorAll("button") y alterna la clase con estilo .focus cada vez que se hace clic en los botones. Esto funciona bien cuando se tienen varios botones.
// Get all the elements on the basis of query selector (button) let btn = document.querySelectorAll("button"); for (var i = 0; i < btn.length; i++) { (function(index) { btn[index].addEventListener("click", function() { console.log("Clicked Button: " + index); let isPresent = false; // Checks if the class is present or not this.classList.forEach(function(e, i) { if (e == "focus") { isPresent = true; } else { isPresent = false; } }); // Toggles the presence of class (.focus) on the basis of the isPresent variable if (isPresent) { this.classList.remove("focus"); } else { this.classList.add("focus"); } }); })(i); } .focus { background-color: #7d698d; color: white; cursor: pointer; } <button id="btn">Click</button> <button id="btn">Click</button> <button id="btn">Click</button>Necesita obtener la identificación del botón que disparó el evento
onclick(event: any) { const btn = document.getElementById(event.target.id); if (btn) btn.style.backgroundColor = '#7d698d'; }La razón por la que el color de los botones en los que se hizo clic anteriormente se restablece después de hacer clic en otro es que el foco se establece en el último botón en el que se hizo clic. Intente usar el código en la respuesta de Venkatesh.