修改同类型所有标签属性两种方法结果不同的原因及替代方案

1. CSS优先级差异 #

方法1是创建内部样式表，用标签选择器（div）定义样式，优先级权重为 0,0,0,1；方法2是直接给元素设置style属性（内联样式），优先级权重为 1,0,0,0，远高于标签选择器。

如果页面原有样式中存在优先级更高的规则（比如类选择器、ID选择器，或者已经存在的内联样式），方法1的标签选择器样式会被原有规则覆盖；而方法2的内联样式会直接覆盖绝大多数原有规则，这是导致视觉效果不同的核心原因。

2. 作用范围差异 #

• 方法1添加的全局样式表会作用于当前页面所有div，以及后续动态创建的div，只要样式规则没被更高优先级的规则覆盖，新div都会自动应用样式。
• 方法2仅修改执行代码时页面中已存在的div，后续通过JS动态添加的div不会自动应用这些样式。

1. 使用CSSOM API添加样式规则 #

直接操作现有样式表添加规则，无需新建style标签：

// 获取页面第一个样式表（可根据实际情况调整索引）
const styleSheet = document.styleSheets[0];
// 插入样式规则，第二个参数是插入位置（放在现有规则末尾）
styleSheet.insertRule(`
div {
  background-color: black;
  color: white;
}
`, styleSheet.cssRules.length);

2. 统一添加类名+预定义样式 #

先给所有目标元素添加统一类名，再通过样式表定义类样式（更符合CSS模块化思想）：

<!-- 先在页面中预定义样式（或通过外部样式表引入） -->
<style>
.custom-dark-div {
  background-color: black;
  color: white;
}
</style>

<script>
// 批量添加类名
document.querySelectorAll('div').forEach(elem => {
  elem.classList.add('custom-dark-div');
});
</script>

这种方式的优势是样式可复用，后续调整样式只需修改类规则，无需改动JS代码，且优先级可控（类选择器权重0,0,1,0，比标签选择器高）。

3. 使用querySelectorAll批量修改内联样式 #

用更现代的querySelectorAll替代getElementsByTagName，返回静态DOM集合，避免动态集合在循环中可能出现的索引问题：

document.querySelectorAll('div').forEach(elem => {
  elem.style.backgroundColor = 'black';
  elem.style.color = 'white';
});

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