Firefox中JS比较元素background颜色值不生效兼容问题求助

问题根本原因 #

你遇到的是不同浏览器对CSS复合属性background的序列化规则不统一的问题：

• Chrome在读取element.style.background时，仅会返回你显式设置的属性值
• Firefox会把background所有关联子属性的默认值（重复规则、定位、附件等）全部拼接成完整字符串返回，也就是你控制台看到的后面带none repeat scroll 0% 0%的内容，自然和你定义的纯颜色字符串匹配失败。
  另外style.background返回的是字符串类型，不存在color子属性，所以你读取first.style.background.color必然返回undefined。

解决方案（按推荐优先级排序） #

1. 独立维护游戏状态（最佳实践） #

不要把游戏逻辑依赖的状态存在DOM属性里，单独用一个二维数组存储棋盘每个格子的归属状态，比如：

// 初始化棋盘状态，0代表空，1代表紫色玩家，2代表绿色玩家
const boardState = Array(列数).fill().map(() => Array(行数).fill(0))

// 落子时同时更新状态和DOM
boardState[id][5 - pcs[id]] = 1 
columns[id][5 - pcs[id]].style.background = _purple

// 胜负判断直接读状态数组，完全没有兼容性问题
if (boardState[_col][_row] === 1) {
  // 匹配紫色玩家逻辑
}

这种方案性能更好、逻辑更易维护，也完全规避了浏览器样式差异问题。

2. 读取单独的backgroundColor属性 #

如果不想改动现有逻辑结构，就不要用复合属性background做比较，改用单独的backgroundColor属性：

// 赋值时也用backgroundColor
columns[id][5 - pcs[id]].style.backgroundColor = _purple

// 比较时同样读backgroundColor
if (columns[_col][_row].style.backgroundColor === _purple) {
  // 现在Chrome和Firefox都能正常匹配
}

backgroundColor是单值属性，不同浏览器返回的格式统一为颜色值，不会附带其他无关属性。

3. 标准化颜色值（兼容极端情况） #

如果担心不同浏览器对颜色值的序列化格式有差异（比如部分场景返回rgba、带多余空格、或者大小写不同），可以读取计算样式后做标准化处理再比较：

function getNormalizedColor(el) {
  const color = getComputedStyle(el).backgroundColor
  // 去掉所有空格，统一小写
  return color.replace(/\s+/g, '').toLowerCase()
}

// 比较时用标准化后的结果
if (getNormalizedColor(columns[_col][_row]) === _purple.replace(/\s+/g, '').toLowerCase()) {
  // 匹配逻辑
}

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