如何用函数批量修改textarea及input文本框样式？求助解决生效异常

核心问题 #

你遇到的问题根源是document.querySelector()方法——它只会返回第一个匹配选择器的DOM元素，所以每次调用setColor()时，只有第一个文本框会被修改样式，其他文本框保持默认。

修复后的代码 #

JavaScript 部分

var bgColors = ["#FFFFFF", "#80C040", "#00FFFF", "#000000", "#000000"];
var textColors = ["#000000", "#000000", "#000000", "#FF0000", "#FFFF00"];
var phColors = ["#808080", "#406020", "#008080", "#800000", "#808000"];
var idx = 0; //index

function setColor() {
  // 循环索引，到达末尾重置
  idx = idx === 4 ? 0 : idx + 1;
  
  // 获取所有input[type="text"]元素
  const inputs = document.querySelectorAll('input[type=text]');
  
  // 遍历每个元素，逐个设置样式
  inputs.forEach(input => {
    input.style.backgroundColor = bgColors[idx];
    input.style.color = textColors[idx];
    input.style.setProperty("--c", phColors[idx]);
  });
}

CSS 部分（无需修改）

::placeholder {
  color: var(--c, #808080);
}

input[type="text"] {
  background-color: #FFFFFF;
  color: #000000;
}

HTML 部分（无需修改）

<input type="text" placeholder="Type Here">
<input type="text" placeholder="Type Here">
<button onclick="setColor()">change</button>

关键修改说明 #

• 替换document.querySelector()为document.querySelectorAll()，一次性获取所有匹配的文本框元素
• 用forEach()遍历所有元素，为每个文本框单独设置样式属性
• 简化索引切换逻辑，用三元运算符替代if-else，代码更简洁

如果后续要修改textarea的样式，只需要把选择器换成textarea（或input[type="text"], textarea），逻辑完全通用。

内容的提问来源于stack exchange，提问作者Kenny_Kodez