Tengo el siguiente código y necesito cambiar "bg-image-container" de <div title="THISTEASER" a "bg-image-container-big"
<div id="teaser_id" class="column class1 class2 class3 class4"> <div class="teaser-class-xy"> <a class="class6 class7 class8 class9" href="test" title="test"> <div title="THISTEASER" class="bg-image-container is-displayed-mobile lazyload" data-bg="1400x1200.jpg"></div> <div title="THISTEASER" class="bg-image-container is-displayed-tablet lazyload" data-bg="1400x1200.jpg"></div> <div title="THISTEASER" class="bg-image-container is-displayed-desktop lazyload" data-bg="1400x1200.jpg"></div> </a>Con
window.onload=function(){ document.getElementById("teaser_id").classList.add('bg-image-container-big'); }Pude cambiar la identificación pero no me ayudó.
No puedo usar jquery ni puedo agregar una ID en HTML (de lo contrario, podría cambiar la clase yo mismo). No necesito una solución de botón, el javascript tiene que estar con window.onload automáticamente
Las clases no son únicas también.
Espero que puedas ayudar, ¡gracias!
En este caso puedes hacer esto:
window.onload=function(){ const divElements = document.querySelectorAll('div.bg-image-container'); divElements.forEach((div) => { div.classList.remove("bg-image-container") div.classList.add("bg-image-container-big") }); }Podrías hacerlo de esta manera:
const elems = document.querySelectorAll('div[title="THISTEASER"]'); elems.forEach((e) => { e.classList.remove("bg-image-container") e.classList.add("bg-image-container-big") });Puede obtener todos los títulos y agregar un bucle.
const elems = document.querySelectorAll('[title="THISTEASER"]'); elems.forEach((e) => { e.classList.remove("bg-image-container")); e.classList.add("bg-image-container-big")); } <div id="teaser_id" class="column class1 class2 class3 class4"> <div class="teaser-class-xy"> <a class="class6 class7 class8 class9" href="test" title="test"> <div title="THISTEASER" class="bg-image-container is-displayed-mobile lazyload" data-bg="1400x1200.jpg"></div> <div title="THISTEASER" class="bg-image-container is-displayed-tablet lazyload" data-bg="1400x1200.jpg"></div> <div title="THISTEASER" class="bg-image-container is-displayed-desktop lazyload" data-bg="1400x1200.jpg"></div> </a> </div> </div>