0
393
Vistas¿Una manera fácil de cambiar estilos entre múltiples elementos en Javascript?
Digamos que tengo la siguiente situación en la que tengo que cambiar el estilo de varios elementos y volver a cambiarlos cuando se cumple una condición específica.
let div = document.querySelectorAll('div') document.querySelector('button').addEventListener('click', function() { div[0].classList.toggle("div1") div[1].classList.toggle("div2") div[2].classList.toggle("div3") div[0].classList.toggle("new1") div[1].classList.toggle("new2") div[2].classList.toggle("new3") }) .div1 { color: red; } .div2 { color: green; } .div3 { color: grey; } .new1 { color: yellow; background: grey } .new2 { color: pink; background: green } .new3 { color: orange; background: red } <div class='div1'>1</div> <div class='div2'>2</div> <div class='div3'>3</div> <button>Click</button> Ahora estoy creando varias clases y uso classList.toggle() para cambiar entre ellas, funciona absolutamente, pero el código se ve muy pesado y quiero que mi código sea más legible, ¿cuál sería una mejor solución para este tipo de situación?
He pensado en cambiar entre con/sin una hoja de estilo css específica, pero no creo que funcione para mi situación y necesito considerar el problema de sobrescribir. (Corrígeme si estoy equivocado).
¿Alguien podría sugerirme una solución alternativa y mejor para resolver esta situación en la que tiene que asignar muchos estilos a varios elementos o hay una manera fácil?
*Sé que este es un ejemplo estúpido y en este ejemplo, una posible solución es usar un bucle forEach y usar una template literal para className , pero este es solo un ejemplo mínimo que creé debido a la regla de desbordamiento de pila, así que no lo haga échame la culpa de este duro ejemplo. Mi código actual contiene más etiquetas html y estilos css diferentes con los que tengo que lidiar. Almacenarlos en una variable y mantener el cambio de clase entre ellos es demasiado complicado y molesto.
Mi código se parece a esto:
2 Respuestas
Responde la pregunta0
Entonces, esto es lo que recomiendo: puede usar el estilo condicional para cambiar todo en un solo lugar. Ejemplo:
.a { /* one set of styles */ } .b .a { /* set a different set of styles */ }De esta manera, puede establecer condicionalmente la clase b en un elemento de nivel superior (como document.body) y cambiar todos sus estilos automáticamente.
0
Puede cambiar las clases de los elementos en un bucle (suponiendo que tenga su css preformateado). Por ejemplo;
/** * When the BUTTON with the id named 'clickMe' is click * Select all the DIV elements * Foreach DIV selected, if the DIV contains the 'old-class-name'; remove it. * Add the new class name to the class-list of the selected DIV */ document.body.querySelector('#clickMe').addEventListener('click',()=>{ document.body.querySelectorAll('DIV').forEach((D,I)=>{ if(D.classList.contains('old-class-name')) D.classList.remove('old-class-name'); D.classList.add(`new-class-name-${I}`); }); }); // List of CSS class names. .new-class-name-0{ color: orange; } .new-class-name-1{ color: green; } .new-class-name-2{ color: blue; } <div class="old-class-name">Div 1</div> <div class="old-class-name">Div 2</div> <div class="old-class-name">Div 3</div> <button id="clickMe">Click</button>