HTMLStyleElement的style属性为空 如何提取首个background-color值

一、HTMLStyleElement的style属性为空的原因 #

• 核心是混淆了两个完全独立的DOM API概念：
  • 所有DOM元素的element.style属性，仅对应标签内联的style=""属性值。只有你给<style>标签本身写了内联样式（比如<style style="display:none">），这个属性才会有对应值。
  • <style>标签内部包裹的CSS规则，是作为纯文本存储在element.textContent字段中的，和标签自身的内联样式没有关联。直接读取style属性拿到空值是完全符合规范的正常表现，不是HTML解析出错。

二、无字符串遍历获取首次出现的background-color值的方案 #

完全可以通过浏览器原生CSSOM API实现，比正则/字符串遍历的准确率高得多，不会误匹配注释、属性值中出现的同名文本，匹配顺序和浏览器解析CSS的顺序完全一致，实现步骤如下：

1. 先将后端返回的HTML字符串解析为独立DOM结构，避免后续操作污染当前页面样式：

const parser = new DOMParser();
const tempDoc = parser.parseFromString(yourRawHtmlString, 'text/html');

2. 创建一个隐藏的临时容器，挂载到当前文档下——只有挂载到存在浏览上下文的文档中，浏览器才会自动解析style标签内的CSS为可操作的样式表对象：

const tempContainer = document.createElement('div');
tempContainer.style.display = 'none';
document.body.append(tempContainer);

3. 按文档从上到下的顺序遍历所有style标签，逐个插入容器后递归遍历样式规则，找到第一个有效的background-color值就立刻终止查找：

let firstBgColor = null;
const styleElements = tempDoc.querySelectorAll('style');

for (const styleEl of styleElements) {
  if (firstBgColor) break;
  tempContainer.append(styleEl);
  const styleSheet = styleEl.sheet;

  // 递归遍历规则，兼容媒体查询、@supports、@layer等嵌套规则场景
  const traverseRules = (ruleList) => {
    for (const rule of ruleList) {
      if (firstBgColor) return;
      // 遇到嵌套规则则递归遍历内部规则
      if (rule instanceof CSSGroupingRule) {
        traverseRules(rule.cssRules);
        continue;
      }
      // 普通样式规则，检查是否存在background-color有效值
      if (rule instanceof CSSStyleRule) {
        const bgValue = rule.style.getPropertyValue('background-color').trim();
        if (bgValue) {
          firstBgColor = bgValue;
          return;
        }
      }
    }
  };

  traverseRules(styleSheet.cssRules);
}

// 操作完成后移除临时容器，避免残留样式污染页面
tempContainer.remove();
console.log('首次出现的background-color属性值：', firstBgColor);

如果需要过滤transparent、initial、unset这类非业务定义的默认值，在判断bgValue的位置增加对应过滤条件即可。

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