点击检查按钮时如何修改多个Input元素的背景颜色？

你可以通过原生JavaScript轻松实现这个需求，不需要给每个input单独加ID，利用它们共同的.letter类名就能批量操作，下面是两种可行的方法：

方法1：直接修改元素内联样式 #

这种方法适合快速修改单一样式属性，直接在JavaScript中指定样式值：

<div class="button">
  <button class="button-check">Проверить</button>
</div>

<div class="box">
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
</div>

<style>
.letter {
  background-color: #e79e30;
  width: 125px;
  height: 125px;
  border-radius: 43px;
}
</style>

<script>
// 获取按钮元素
const checkBtn = document.querySelector('.button-check');

// 给按钮添加点击事件监听
checkBtn.addEventListener('click', function() {
  // 获取所有带.letter类的input元素
  const letterInputs = document.querySelectorAll('.letter');
  
  // 遍历每个input，修改背景色
  letterInputs.forEach(input => {
    input.style.backgroundColor = '#2ecc71'; // 替换成你想要的颜色
  });
});
</script>

方法2：切换CSS类（推荐） #

这种方法更符合样式与逻辑分离的原则，修改样式时只需调整CSS，不需要改动JavaScript代码：

<div class="button">
  <button class="button-check">Проверить</button>
</div>

<div class="box">
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
  <input type="text" class="letter" />
</div>

<style>
.letter {
  background-color: #e79e30;
  width: 125px;
  height: 125px;
  border-radius: 43px;
  transition: background-color 0.3s; /* 可选：添加过渡动画 */
}

/* 定义修改后的样式类 */
.letter.active {
  background-color: #3498db;
}
</style>

<script>
const checkBtn = document.querySelector('.button-check');

checkBtn.addEventListener('click', function() {
  const letterInputs = document.querySelectorAll('.letter');
  letterInputs.forEach(input => {
    // 切换active类（如果需要切换回原样式，用toggle替代add）
    input.classList.add('active');
  });
});
</script>

关键说明 #

• document.querySelectorAll('.letter')会返回所有带有.letter类的元素，不管数量多少都能批量处理
• 如果需要点击按钮时在两种样式间切换，把classList.add('active')改成classList.toggle('active')即可
• 不需要给每个input加ID，利用类名批量操作更高效也更易维护

内容的提问来源于stack exchange，提问作者Мария