相同JS代码对#last_name生效但对#first_name不生效问题求解

问题原因 #

• 你第一段代码只在setInterval中写了单向赋值的逻辑，没有反向切换的步骤，定时器每次触发都执行同样的赋值操作，执行一次之后就不会再有视觉变化，看起来就像#first_name没有响应脚本。
• 你第二段用三目运算符判断颜色值的写法有兼容性问题：不同浏览器返回的style.color格式不统一，部分浏览器会返回带空格的rgb值、rgba格式或者十六进制格式，会导致判断条件不触发，自然无法正常切换。

解决方案 #

用独立变量记录当前颜色状态，避免直接对比样式字符串，逻辑更稳定，也能实现循环切换效果，示例代码如下：

let first_name = document.getElementById('first_name');
let last_name = document.getElementById('last_name');
// 初始化颜色
first_name.style.color = 'rgb(255,255,255)';
last_name.style.color = 'rgb(254, 215, 3)';
// 用变量记录当前状态
let isDefault = true;

const color_swap = () => {
  setInterval(() => {
    if (isDefault) {
      first_name.style.color = 'rgb(254, 215, 3)';
      last_name.style.color = 'rgb(255,255,255)';
    } else {
      first_name.style.color = 'rgb(255,255,255)';
      last_name.style.color = 'rgb(254, 215, 3)';
    }
    // 翻转状态
    isDefault = !isDefault;
  }, 1000);
};

window.addEventListener('load', color_swap);

如果还是出现#first_name不生效的情况，可以打开浏览器控制台检查两点：

1. 有没有报错提示first_name是null，如果有说明JS执行时DOM还没加载完成，可以直接把JS代码放在</body>标签之前，不用额外监听load事件也能正常运行。
2. 检查元素的样式面板，看有没有其他CSS规则给h1设置了颜色，并且优先级高于行内样式，如果有可以给颜色值加!important，或者调整CSS选择器优先级。

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