Estoy aprendiendo JS en este momento, y trato de hacer lo siguiente:
Estoy creando una cuadrícula html, cada celda está marcada con una clase de cell que no le da un color de fondo. Cuando marco la celda (es decir, al hacer clic), el código JS le agrega una clase colored , lo que le da un color de fondo:
.colored{ background-color: black; }Ahora, estoy tratando de dar un paso adelante y darle al usuario control sobre el color de fondo de las celdas usando la entrada de HTML (tipo de color). Estoy obteniendo el color que eligió el usuario, y luego quiero cambiar los colores de fondo de las celdas, y aquí está mi problema.
Quiero obtener la regla css para la clase de colored y cambiarla al valor proporcionado por el usuario. Intenté cambiarlo usando ( colorPicker es el elemento de entrada):
colorPicker.addEventListener('input', (e) => { cells.forEach((cell) => { if(cell.classList.contains('colored')) cell.style.backgroundColor = e.target.value; }) }) Lo anterior cambia solo las celdas que actualmente tienen una clase colored , y no el conjunto de reglas colored en sí mismo, por lo que las celdas que se marcarán más adelante no cambiarán de color.
He encontrado formas de cambiar el conjunto de reglas css directamente usando document.styleSheets , pero estoy buscando una forma más elegante de cambiar la clase css colored .
¿Existe tal manera?
Podría implementar el mismo comportamiento con las variables CSS . Pero en lugar de cambiar el estilo de un elemento específico, puede cambiar el valor de la propiedad.
Una versión simple se puede utilizar así:
const colorPicker = document.querySelector('.color-picker'); colorPicker.addEventListener('input', (event) => { // Retrieve chosen color const color = event.target.value; // Overwrite CSS variable document.documentElement.style.setProperty('--color-red', color); }, false); :root { --color-red: #ff0000; } .colored { background-color: var(--color-red); margin: 0 0 0.25em; } <div class="colored">Am I red?</div> <div class="colored">Should I be red?</div> <div class="colored">Red is my color?</div> <div class="colored">All I want is red?</div> <div class="colored">Roses are red?</div> <input type="color" class="color-picker" />