¿Cómo puedo agregar una clase a 2 divs que tienen la misma class ?
En este ejemplo tengo 3 div y 2 de ellos comparten la class ".matched".
¿Cómo puedo agregar en JS otra clase (por ejemplo, .sameclass) a estos 2 divs?
Muchas muchas gracias de antemano!
<div class="container"> <div class="box1 matched"></div> <div class="box2 matched"></div> <div class="box3"></div> </div>CSS
.container { display: flex; } .box1 { width: 100px; height: 100px; background-color: red; } .box2 { width: 100px; height: 100px; background: green; } .box3 { width: 100px; height: 100px; background: purple; }Busque los elementos con querySelectorAll y luego use element.classList.add("matched") dentro de un ciclo para agregar las clases.
getElementsByClassName() . let divs=document.getElementsByClassName("matched");
Esto devuelve una colección HTML, básicamente una matriz, de todos los elementos con una clase CSS matched .
.classList.add() . p.ej myElement.classList.add("anotherClass");
Todos juntos tenemos:
let divs = document.getElementsByClassName("matched"); for (let a = 0; a < divs.length; a++) { divs[a].classList.add("anotherClass"); } .anotherClass { color: red; } <div class="container"> <div class="box1 matched">a</div> <div class="box2 matched">b</div> <div class="box3">c</div> </div>Puedes escribir algo como esto:
let elements = document.getElementsByClassName("matched"); for(let element of elements) { element.classList.add("same"); }