如何一次更改多个 CSS 元素属性并无限循环?

Question

所以我试图让它在我单击按钮时所有框都会改变颜色并使其连续运行，直到我再次单击按钮停止它。

我尝试了querySelectorAll((，但它只改变了第一个框的颜色

这是我的代码笔，显示了正在发生的事情 https://codepen.io/designextras/pen/bGEowbO

这是下面的JavaScript

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelector('.box')

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
colorBtn.addEventListener('click', function(e) {
let newColors = getRandomColor()
boxes.style.background = newColors
})

编辑：我通过添加一个forEach((来修复它

colorBtn.addEventListener('click', function(e) {

boxes.forEach(color => {
let newColors = getRandomColor()
color.style.background = newColors
})
})

Answer 1

您需要使用document.querySelectorAll来获取所有具有box的类

然后，您将执行forEach循环，并调用该getRandomColor函数以单独应用不同的颜色。

您可以在此处阅读有关循环querySelectorAll的更多信息，并详细解释

运行下面的代码片段以查看其全部工作情况。

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelectorAll('.box')
var running = false
function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function start() {
if (running) {
boxes.forEach(color => {
let newColors = getRandomColor()
color.style.background = newColors
})
setTimeout(start, 500)
}
}
colorBtn.addEventListener('click', function(e) {
colorBtn.innerText = 'Stop'
if (running) {
running = false
colorBtn.innerText = 'Change Color'
} else {
running = true
start()
}
})

* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
}
body {
background: radial-gradient(circle, rgba(51, 51, 51, 1) 0%, rgba(29, 19, 19, 1) 100%);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2rem auto;
padding-top: 1rem;
color: #fff;
max-width: 60rem;
}
.btn-container {
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.btn {
padding: 1rem 3rem;
background: linear-gradient(13deg, rgba(34, 81, 249, 1) 0%, rgba(19, 246, 255, 1) 100%);
border: none;
border-radius: 4px;
font-size: 1.2rem;
outline: none;
cursor: pointer;
color: #fff;
}
.box-container {
width: 100%;
height: 100%;
background: red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
background: blue;
padding: 3rem 3rem;
}
#box-1 {
background: white;
}
#box-2 {
background: red;
}
#box-3 {
background: green;
}
#box-4 {
background: yellow;
}
#box-5 {
background: orange;
}
#box-6 {
background: blue;
}

<div class="box-container">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
<div class="box" id="box-5"></div>
<div class="box" id="box-6"></div>
</div>
<div class="container">
<div class="btn-container">
<button class="btn" id="btn-1">Change Color</button>
</div>
</div>

Answer 2

不要忘记querySelectorAll中的"全部"：

const colorBtn = document.querySelector('#btn-1')
const boxes = document.querySelectorAll('.box') 

function getRandomColor() {
let letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
colorBtn.addEventListener('click', function(e) {
boxes.forEach(x=>x.style.background = getRandomColor())
})

* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-family: 'Oswald', sans-serif;
}
body {
background: radial-gradient(circle, rgba(51,51,51,1) 0%, rgba(29,19,19,1) 100%);
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 2rem auto;
padding-top: 1rem;
color: #fff;
max-width: 60rem;
}
.btn-container {
width: 60%;
margin: 0 auto;
display: flex;
justify-content: center;
}
.btn {
padding: 1rem 3rem;
background: linear-gradient(13deg, rgba(34,81,249,1) 0%, rgba(19,246,255,1) 100%);
border: none;
border-radius: 4px;
font-size: 1.2rem;
outline: none;
cursor: pointer;
color: #fff;
}
.box-container {
width: 100%;
height: 100%;
background: red;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
}
.box {
background: blue;
padding: 3rem 3rem; 
}
#box-1 {
background: white;
}

#box-2 {
background: red;
}
#box-3 {
background: green;
}
#box-4 {
background: yellow;
}
#box-5 {
background: orange;
}
#box-6 {
background: blue;
}

<div class="box-container">
<div class="box" id="box-1"></div>
<div class="box" id="box-2"></div>
<div class="box" id="box-3"></div>
<div class="box" id="box-4"></div>
<div class="box" id="box-5"></div>
<div class="box" id="box-6"></div>
</div>
<div class="container"> 
<div class="btn-container">
<button class="btn" id="btn-1">Change Color</button>
</div>
</div>

另外，我认为您希望每个框具有不同的颜色，因此我更改了您的代码。