使用JavaScript获取CSS伪元素content属性值返回未知字符的解决办法

你遇到的问题是因为getComputedStyle返回的是计算后的实际字符，而不是CSS里写的原始转义字符串（比如\e917）。要拿到原始值，得直接解析CSS规则，而不是用计算后的样式。

核心方法：遍历样式表匹配目标规则 #

浏览器的CSSOM允许直接访问页面的样式规则，我们可以遍历所有样式表，找到匹配目标伪元素的规则，提取content的原始值。

function getPseudoElementOriginalContent(targetSelector, pseudoType) {
  // 遍历页面所有样式表
  for (const sheet of document.styleSheets) {
    try {
      // 处理跨域样式表的访问限制（跨域会抛出错误，直接跳过）
      const rules = sheet.cssRules || sheet.rules;
      for (const rule of rules) {
        // 检查规则选择器是否完全匹配目标（注意伪元素写法可能是:before或::before）
        if (rule.selectorText && rule.selectorText.trim() === `${targetSelector}${pseudoType}`) {
          // 返回原始的content属性值
          return rule.style.getPropertyValue('content');
        }
      }
    } catch (e) {
      // 跨域样式表无法访问，跳过当前表
      continue;
    }
  }
  return null;
}

// 调用示例
const originalContent = getPseudoElementOriginalContent('#my_p', ':before');
console.log(originalContent); // 输出 '\e917'

注意事项 #

• 跨域限制：如果目标样式在跨域的外部CSS文件中，浏览器会禁止访问该样式表的规则，这种情况无法通过此方法获取值，仅支持同域样式表或内联样式。
• 选择器匹配：要确保传入的选择器和伪元素写法与CSS中完全一致（比如CSS里是p::before，就要用'p'和'::before'作为参数）。
• 优先级问题：如果多个规则匹配同一个伪元素，此方法会返回第一个找到的规则值，若需优先级最高的规则，需要额外处理规则优先级排序。

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