能否通过变量设置元素背景色？代码修改后失效问题咨询

你遇到的这个问题其实是JavaScript里值传递和引用传递的典型坑，我来给你掰扯清楚：

问题核心：变量存的是「值的副本」，不是「元素属性的引用」 #

当你写var t_bgClr = t_cur.style.backgroundColor的时候，你只是把当前背景色的字符串值（比如"white"）复制了一份存在t_bgClr里——这个变量和元素的style属性完全是两个独立的东西。之后你给t_bgClr赋值"lightGreen"，只是改了变量里存的字符串，根本没碰元素本身的样式属性，所以背景色当然不会变。

获取和设置时变量的差异 #

• 获取背景色：t_cur.style.backgroundColor是读取元素style对象的backgroundColor属性值，把这个值复制给变量，此时变量是独立的「值副本」，和原属性没有绑定关系。
• 设置背景色：必须直接修改元素style对象的backgroundColor属性，或者让变量指向整个style对象（因为对象是引用传递），这样修改变量的属性才会同步到元素上。

解决方法 #

方法1：直接简化为引用style对象

如果想减少重复代码，可以把元素的style对象存到变量里，之后通过变量操作它的属性：

function switchToGreen(index) {
  var allGreen = true;
  var t = document.getElementsByTagName("td");
  var t_cur = t[index];
  var t_style = t_cur.style; // 存style对象的引用

  if (t_style.backgroundColor == "white") {
    t_cur.innerHTML = "1";
    t_style.backgroundColor = "lightGreen"; // 修改引用对象的属性，会同步到元素
  } else {
    t_cur.innerHTML = "- 1";
    t_style.backgroundColor = "white";
  }
  /* ... */
}

这里t_style是指向元素style对象的引用，修改它的backgroundColor属性就是直接修改元素的样式，自然会生效。

方法2：用CSS类切换（更推荐）

其实用硬编码颜色值容易踩坑（比如浏览器可能返回rgb(255,255,255)而不是"white"，导致判断失效），更稳妥的方式是用CSS类来切换：

/* 先定义两个样式类 */
.cell-white {
  background-color: white;
}
.cell-green {
  background-color: lightGreen;
}

function switchToGreen(index) {
  var allGreen = true;
  var t = document.getElementsByTagName("td");
  var t_cur = t[index];

  if (t_cur.classList.contains('cell-white')) {
    t_cur.innerHTML = "1";
    t_cur.classList.replace('cell-white', 'cell-green');
  } else {
    t_cur.innerHTML = "- 1";
    t_cur.classList.replace('cell-green', 'cell-white');
  }
  /* ... */
}

这种方式代码更清晰，也避免了颜色值格式不一致的问题，后期改颜色只需要改CSS就行，维护起来更方便。

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