如何用JavaScript获取元素style属性中的背景色值并进行比较？

我来帮你理清这个问题，你原来的代码里有几个语法误区，咱们一步步来解决：

首先，精准定位目标元素 #

你原来用getElementsByTagName('div').item(0)来获取元素，这种方式很容易选到页面上其他无关的div。推荐用更精准的选择器，比如基于class的查询：

// 获取class同时包含card和card-stats的div元素
const targetDiv = document.querySelector('.card.card-stats');

然后，正确获取背景色值 #

这里要分两种情况：

1. 背景色是内联style属性设置的（就像你示例里的style="background-color:#FF001A"）
2. 背景色是通过CSS类设置的（如果后续修改成类控制样式的话）

情况1：获取内联style的背景色 #

直接通过元素的style属性获取，但要注意：element.style.backgroundColor返回的是RGB格式的值（比如rgb(255, 0, 26)对应#FF001A），所以我们需要把它转换成十六进制格式：

先写一个辅助转换函数：

// 将RGB格式字符串转为十六进制格式
function rgbToHex(rgbString) {
  // 提取RGB值里的数字部分
  const rgbNumbers = rgbString.match(/\d+/g);
  if (!rgbNumbers || rgbNumbers.length !== 3) return null;
  
  const [r, g, b] = rgbNumbers.map(num => parseInt(num, 10));
  // 拼接成十六进制字符串，自动补零并转大写
  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()}`;
}

然后获取并转换颜色：

// 获取内联style的背景色（RGB格式）
const inlineBgRgb = targetDiv.style.backgroundColor;
// 转为十六进制
const inlineBgHex = rgbToHex(inlineBgRgb);

情况2：获取CSS类设置的背景色 #

如果背景色是通过样式表的类定义的，需要用getComputedStyle来获取最终生效的样式：

// 获取元素的计算样式
const computedStyle = window.getComputedStyle(targetDiv);
// 获取背景色（RGB格式）
const computedBgRgb = computedStyle.backgroundColor;
// 转为十六进制
const computedBgHex = rgbToHex(computedBgRgb);

最后，与红色比较执行后续代码 #

红色的标准十六进制是#FF0000，你示例里的颜色是#FF001A（偏红的变种），根据你的需求选择比较对象：

// 定义要比较的红色值
const standardRed = '#FF0000';
const targetRed = '#FF001A';

// 与示例中的红色比较
if (inlineBgHex === targetRed) {
  // 执行你的后续逻辑
  console.log('背景色是目标红色#FF001A');
}

// 或者与标准红色比较
if (inlineBgHex === standardRed) {
  console.log('背景色是标准红色#FF0000');
}

解释你原来代码的问题 #

• document.getElementsByTagName('div').item(0)：无法保证第一个div就是你要的目标元素，选择器不够精准。
• var b = a.getAttributeNode("STYLE").value：a已经是style属性节点了，它没有STYLE这个子属性，这行代码会直接报错。正确的写法是a.value，但解析这个style字符串里的背景色非常繁琐，不如直接用元素的style属性或getComputedStyle更可靠。

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