JavaScript操作CSS样式时出现不生效问题如何排查解决

按你遇到的现象顺序逐个排查，90%的问题都是以下几个原因导致的： #

1. 先解决「修改独立CSS文件样式不生效」的核心问题 #

这是最底层的问题，这个解决了其他两个问题的根因也能顺藤摸瓜找到：

• 第一步直接打开浏览器开发者工具（F12），选中那个样式不生效的元素，看右侧「样式」面板：
  • 如果能看到你写的.readtrue/.readfalse样式，但是样式被划了横线：说明是CSS优先级冲突，你的类样式被更高优先级的规则覆盖了。最常见的原因是你最开始循环给元素加样式时，是直接通过div.style.backgroundColor = xxx、div.style.border = xxx这种方式写的行内样式，行内样式优先级远高于类选择器，自然会覆盖类里写的样式。
    解决方法：先把之前给元素加的冲突行内样式清空，比如执行div.style.backgroundColor = ''、div.style.border = ''，类样式就能正常生效了，非必要不要随便给元素加行内样式。
  • 如果完全看不到你写的类样式规则：先去「网络」面板看你的CSS文件有没有加载成功（状态码是不是200，路径有没有写错），再检查CSS里的类名有没有拼写错误、大小写错误，有没有多写空格导致选择器变成后代选择器（比如写成.readtrue div就只会匹配类下的div，不会匹配类本身）。
• 如果以上都没问题，按Ctrl+F5（Windows）/Cmd+Shift+R（Mac）硬刷新页面，清掉浏览器缓存的旧CSS文件。

2. 解决「JS插入<style>到<head>提示head不存在」的问题 #

这个100%是脚本执行时机太早导致的：
你把JS代码放在了页面太靠前的位置（比如<head>最开头，且没有加延迟加载配置），代码运行的时候DOM树还没解析完成，别说<head>标签，后面的业务元素都还没生成，自然拿不到节点。
解决方法二选一：

• 把<script>标签移到页面底部，</body>闭合标签的前面，等所有DOM解析完成再执行JS
• 把所有DOM操作的代码包在DOM加载完成的回调里：

document.addEventListener('DOMContentLoaded', function() {
  // 所有获取DOM、修改DOM、插style的代码都放这里
  const styleEl = document.createElement('style');
  styleEl.textContent = `.readtrue { background: #e8f4ff; border: 1px solid #409eff; } .readfalse { background: #f5f5f5; border: 1px solid #ccc; }`;
  document.head.appendChild(styleEl);
})

3. 解决「最后一个元素class切换成功但样式不生效」的问题 #

这个问题基本都是你循环逻辑的小疏漏导致的：

• 先在循环里给最后一个元素打个断点，看class设置完成后，控制台输出这个元素的outerHTML，确认class值真的是readtrue/readfalse，有没有被后续的逻辑又修改了class，或者额外加了冲突的行内样式
• 检查循环的终止条件有没有写错，比如是不是多写/少写了等号，导致最后一个元素没走到样式清空/设置的逻辑，或者循环结束后你单独写了处理最后一个元素的逻辑，不小心给它加了冲突样式
• 确认最后一个元素没有绑定ID选择器、父级!important样式这类优先级更高的规则，在开发者工具样式面板里一眼就能看到覆盖关系。

关于你的class切换代码 #

你现在用setAttribute('class', 'xxx')的写法在没有其他共存类的场景下是可以正常运行的，更稳妥的写法是用classListAPI，不会意外覆盖元素上其他需要保留的类：

div.classList.toggle('readtrue', val.read);
div.classList.toggle('readfalse', !val.read);

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