De hecho, estoy trabajando en un modo oscuro y tengo un problema para cambiar el css de más de un elemento.
Código JS:
var elem = document.getElementById('fonts'); for(var i=0; i<elem.length; i++){ elem[i].style.color="#FFFFFF"; console.log(elem[i]); }Pero nada cambia... Creo que necesito hacerlo con el bucle porque tengo más elementos con las "fuentes" de id. Si lo hago sin el bucle, solo cambiará el primero.
La consola no da error ni nada... ¿Hice algo mal?
Bueno, lo está haciendo de manera incorrecta, en primer lugar, puede usar la misma id para varios elementos, en lugar de eso, debe usar una clase
Así que mira esto
document.getElementById("btn").addEventListener("click", function() { var elem = document.querySelectorAll('.fonts'); for(var i=0; i<elem.length; i++){ elem[i].style.color = "#00aeff"; console.log(elem[i]); } }); * { margin: 0; padding: 0; } <h1 class="fonts">Heading1</h1> <p class="fonts">Paragraph</p> <span class="fonts">Span</span> <div class="fonts">Div</div> <button id="btn">Change</button> Y el CSS y el botón no son necesarios, es solo por ejemplo, usa querySelectorAll para seleccionar todos los elementos con la misma clase o lo que sea y luego ejecuta un for loop en esos elementos
solo puedes usar <div id="fonts"> una vez. entonces, si lo tiene varias veces en su html, su código no funcionará ...
cambiar id's a clases
pruebe su código intente usar el HTML DOM "querySelector" en lugar de "getElementById".
para una identificación use esta sintaxis
var elem = document.querySelector("#fonts");para una clase usa esta sintaxis
var elem = document.querySelector(".fonts");También podemos usar la instrucción for...of para simplificar el código y aumentar la legibilidad.
document.getElementById("btn").addEventListener("click", function() { let elem = document.querySelectorAll('.fonts'); for (let font of elem) { font.style.color = "#00aeff"; } }); * { margin: 0; padding: 0; } <h1 class="fonts">Heading1</h1> <p class="fonts">Paragraph</p> <span class="fonts">Span</span> <div class="fonts">Div</div> <button id="btn">Change</button>