如何使用JavaScript为多个DOM元素设置相同属性？

首先要指出你原代码里的一个问题：连续两次调用setAttribute('style')会覆盖之前的样式设置，所以最终只有color: #00ff00会生效，text-decoration: underline会被冲掉。解决这个问题的同时，我们可以通过封装逻辑来避免重复代码，针对12个元素的场景，有两种高效的方法：

方法一：封装复用函数 #

写一个通用函数来处理元素的属性设置，然后遍历所有目标元素ID批量执行：

// 定义通用设置函数
function configureElement(element) {
  // 用style对象设置样式，避免覆盖问题
  element.style.textDecoration = 'underline';
  element.style.color = '#00ff00';
  // 设置href属性
  element.setAttribute('href', '#zag');
}

// 列出所有需要处理的元素ID（补全你的12个ID）
const targetElementIds = ['blue', 'red', 'green', 'yellow', 'purple', 'orange', ...];

// 循环处理每个元素
targetElementIds.forEach(id => {
  const el = document.getElementById(id);
  // 先判断元素是否存在，避免报错
  if (el) {
    configureElement(el);
  }
});

方法二：结合CSS类（推荐） #

如果样式是固定的，更推荐把样式写到CSS类里，这样后续修改样式只需要改CSS，更易维护：

首先在CSS中定义样式类：

.element-style {
  text-decoration: underline;
  color: #00ff00;
}

然后用JS批量给元素添加类和设置属性：

function configureElement(element) {
  element.classList.add('element-style');
  element.setAttribute('href', '#zag');
}

const targetElementIds = ['blue', 'red', ...]; // 你的12个元素ID
targetElementIds.forEach(id => {
  const el = document.getElementById(id);
  if (el) {
    configureElement(el);
  }
});

这样不管你有多少个元素，只需要维护targetElementIds数组，以及一次属性设置逻辑即可，完全避免重复代码。

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