Tengo un botón que tiene que alternar clases entre 4 divs. Los archivos HTML, CSS y JS están a continuación, estoy buscando crear un solo botón de alternancia, no dos.
function toggleColor() { var box = document.getElementsByClassName("wrapper"); for (var x = 0; x < box.length; x++) { box[x].innerHTML = box[x].innerHTML.replace(/class="(red|green)"/gi, g1 => { return (g1 == "red") ? "class=\"red\"" : "class=\"green\"" }); } } .wrapper * { width: 100px; height: 100px; margin: 100px; } .red { background: #f00; } .green { background: #0f0; } <button onclick="toggleColor()">toggle</button> <div class="wrapper"> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> </div>Puede usar querySelectorAll para obtener una lista de nodos que coincida con el selector.
Con cada nodo en la lista, puede usar classList.toggle para intercambiar la clase.
function toggleColor() { const boxes = document.querySelectorAll('.box') boxes.forEach(box => { box.classList.toggle('red') box.classList.toggle('green') }) } .wrapper * { width: 100px; height: 100px; margin: 100px; } .red { background: #f00; } .green { background: #0f0; } <button onclick="toggleColor()">toggle</button> <div class="wrapper"> <div class="box red"></div> <div class="box red"></div> <div class="box red"></div> <div class="box red"></div> </div>Puede usar classList.toggle para agregar y eliminar una clase de un elemento. Agregar una clase adicional a una existente anulará sus propiedades CSS.
function toggleColor() { let boxes = document.querySelectorAll('.red'); boxes.forEach(box => { box.classList.toggle('green'); }); } .wrapper * { width: 100px; height: 100px; margin: 100px; } .red { background: #f00; } .green { background: #0f0; } <button onclick="toggleColor()">toggle</button> <div class="wrapper"> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> </div> .wrapper * { width: 100px; height: 100px; margin: 100px; } .red { background: #f00; } .green { background: #0f0; } <html> <body> <button onclick="toggleColor()">toggle</button> <div class="wrapper"> <div class="red"></div> <div class="red"></div> <div class="red"></div> <div class="red"></div> </div> <script> function toggleColor() { const elements = document.querySelectorAll('.wrapper > div'); elements.forEach((element) => { if (element.className === 'red') { element.className = 'green' } else if (element.className === 'green') { element.className = 'red' } }) } </script> </body> </html>