为什么修改div背景色的JS代码在Chrome浏览器中无法运行？

害，这种情况我也碰到过好多次——明明alert都弹了，说明JS跑起来了，但div背景色、label内容就是纹丝不动，急死人！给你列几个最可能的坑，你挨个排查下：

• 选择器根本没找到目标元素
  这绝对是Top1原因！比如你写document.getElementById('myDiv')，但实际div的ID是my-div；或者用类选择器时漏了.，写成document.querySelector('myClass')而不是document.querySelector('.myClass')。
  快速验证的方法：在alert前加一行代码打日志：

  const target = document.querySelector('#你的元素选择器');
  console.log(target); // 要是输出null，那就是没找到元素无疑了
  

  另外，就算你把代码放在DOMContentLoaded或者window.onload里，也有可能目标元素是动态生成的（比如靠其他脚本异步加载出来的），这时候你的代码执行时，元素还没被加到DOM里，自然改不了。

• 样式被更高优先级的规则盖过去了
  比如你的div本身写了内联样式<div style="background: #fff;">，或者CSS里有带!important的规则：

  .target-div {
    background-color: blue !important;
  }
  

  这时候你用element.style.backgroundColor设置的样式优先级不够，就会被覆盖。可以试试用element.style.setProperty('background-color', 'green', 'important')强制覆盖，或者去CSS里调整优先级。

• 修改错了元素属性
  比如改label内容的时候，你误用了label.value？不对哦，label的文本内容得用label.textContent或者label.innerHTML，value是表单元素（比如input）的属性，label根本没有这个属性，改了当然看不到变化。

• 页面里有重复的ID
  要是你不小心给两个元素用了同一个ID，JS只会选中第一个，但你想改的是第二个，这时候看起来就是代码没生效，实际上是改了另一个你没注意到的元素。

建议你先打开Chrome开发者工具（F12），直接在Console里运行你的选择器代码，看看能不能选中目标元素，再手动修改属性试试，一下子就能找到问题所在啦！

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