如何使用JavaScript获取CSS颜色值并筛选特定颜色的HTML标题？

嘿，我来帮你搞定这个问题！你提到用PDFtoHTML转出来的HTML里，标题是通过rgb(0, 129, 162)这个颜色区分的，样式还写在head的style标签里给span/div加了类（比如span.cls_022）。下面分两部分解决你的需求：

一、筛选目标颜色的标题元素 #

这里有两种高效的思路，根据你的HTML结构选合适的：

思路1：通过CSS类名直接筛选（推荐，更高效） #

PDFtoHTML生成的类名通常是和样式一一对应的，比如所有应用了目标颜色的元素都会带有类似cls_022的类。你可以先找到所有对应这个颜色的CSS选择器，再直接获取元素：

// 遍历页面所有样式表，找到应用目标颜色的选择器
const targetColor = 'rgb(0, 129, 162)';
const targetSelectors = [];

for (const sheet of document.styleSheets) {
  try {
    const rules = sheet.cssRules || sheet.rules;
    for (const rule of rules) {
      // 检查当前规则的颜色是否匹配目标值
      if (rule.style?.color === targetColor) {
        targetSelectors.push(rule.selectorText);
      }
    }
  } catch (e) {
    // 跨域样式表会抛出权限错误，直接跳过即可
    continue;
  }
}

// 用找到的选择器批量获取标题元素
if (targetSelectors.length > 0) {
  const combinedSelector = targetSelectors.join(', ');
  const titleElements = document.querySelectorAll(combinedSelector);
  console.log('找到的标题元素:', titleElements);
  // 这里可以对标题元素做后续操作，比如提取文本、添加标记等
}

思路2：遍历元素检查计算样式（适合类名不统一的情况） #

如果类名没有规律，或者样式是内联写的，就需要逐个检查元素的最终计算颜色：

const targetColor = 'rgb(0, 129, 162)';
const titleElements = [];

// 辅助函数：将元素的计算颜色统一转为rgb格式
function getElementRGBColor(element) {
  const computedStyle = window.getComputedStyle(element);
  const color = computedStyle.color;

  // 处理rgb格式
  const rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
  if (rgbMatch) {
    return `rgb(${rgbMatch[1]}, ${rgbMatch[2]}, ${rgbMatch[3]})`;
  }

  // 处理alpha为1的rgba格式
  const rgbaMatch = color.match(/rgba\((\d+),\s*(\d+),\s*(\d+),\s*1\)/);
  if (rgbaMatch) {
    return `rgb(${rgbaMatch[1]}, ${rgbaMatch[2]}, ${rgbaMatch[3]})`;
  }

  // 可选：将十六进制颜色转为rgb格式（避免浏览器返回格式差异）
  if (color.startsWith('#')) {
    const hexToRgb = (hex) => {
      const r = parseInt(hex.slice(1, 3), 16);
      const g = parseInt(hex.slice(3, 5), 16);
      const b = parseInt(hex.slice(5, 7), 16);
      return `rgb(${r}, ${g}, ${b})`;
    };
    return hexToRgb(color);
  }

  return color;
}

// 遍历所有span和div元素
document.querySelectorAll('span, div').forEach(el => {
  const elColor = getElementRGBColor(el);
  if (elColor === targetColor) {
    titleElements.push(el);
  }
});

console.log('找到的标题元素:', titleElements);

二、用JavaScript获取CSS颜色属性值 #

获取颜色属性分两种场景，根据需求选择：

1. 获取内联样式中的颜色 #

如果颜色是直接写在元素的style属性里的，直接用element.style.color：

const element = document.querySelector('.cls_022');
const inlineColor = element.style.color;
console.log('内联样式颜色:', inlineColor);

⚠️ 注意：这个方法只能拿到元素style属性里写的颜色，不能获取通过样式表继承或应用的颜色。

2. 获取最终计算后的颜色（推荐） #

要获取元素实际显示的颜色，必须用window.getComputedStyle()：

const element = document.querySelector('.cls_022');
const computedColor = window.getComputedStyle(element).color;
console.log('计算后的颜色:', computedColor);

浏览器返回的格式可能是rgb()、rgba()或十六进制，所以建议用上面的getElementRGBColor辅助函数统一格式，避免匹配失败。

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