是否可以让Chrome返回CSS“ content”属性的原始值？

Question

考虑以下JavaScript，CSS和HTML代码：

console.log(getComputedStyle(document.querySelector('p'), '::after').getPropertyValue('content'));

p::after {
    content: "Hello" attr(data-after);
}

<p data-after=" World"></p>

Firefox和IE11都返回CSS：中定义的原始值"Hello" attr(data-after)，这就是我所需要的。

但是Chrome返回"Hello World"，解析后的值。

当我使用Chrome DevTools检查元素时，可以在“样式”面板中看到它显示以下信息：

p::after {
    content: "Hello" attr(data-after);
}

因此，看起来Chrome仍然有能力知道原始值。

是否有任何JavaScript解决方案可以使Chrome返回Firefox和IE11这样的CSS定义的原始值？只要可以在JavaScript中使用，即使Chrome独有的方法也很好。

---

情况说明

在回答成员关于原因的问题时，情况如下：

我正在尝试speak: never在伪元素上为CSS创建一个“ polyfill” 。目前，任何浏览器均不支持该speak属性。

屏幕阅读器可以读取CSS伪元素，目前无法从屏幕阅读器中轻松隐藏它们。解决该问题的常用方法是使用HTML代码（例如）<span aria-hidden="true">...</span>代替方便的CSS伪元素和speak: never，而我认为这种方法既不方便又令人失望。

因此，此polyfill主要与Web可访问性有关。

这种polyfill的工作方式将要求CSS开发人员编写一些额外的CSS代码作为指标，例如attr(speak-never)：

p::after {
    content: "please make me inaudible" attr(speak-never);
    }

然后在JavaScript中，polyfill循环浏览页面上的每个元素，并检查其伪元素::before和::afterCSS content属性的值是否包含attr(speak-never)。如果找到指示字符串，则填充工具固定伪元素（通过添加自定义元素<before aria-hidden="true">...</before>和<after aria-hidden="true">...</after>编程）。

现在的问题是Chrome无法attr(speak-never)以JavaScript 返回上述内容。尽管polyfill也可以通过要求CSS开发人员添加其他指标（例如--speak: neverChrome）来起作用，但polyfill最好使CSS开发人员的工作尽可能简单，并且不需要该额外--speak: never指标。

这就是为什么创建此问题的原因。

---

更新资料

我决定使用它counter-reset: speak-never作为指标，因为所有浏览器都可以用JavaScript读取它。

Answer 1

您可以通过查找规则document.styleSheets。该属性促进了由多个属性组成的多个规则组成的样式表列表。然后，您可以遍历样式表和规则并从中提取原始属性值。

这是一种基本方法，遵循<style>和<link>元素中直接定义的规则：

for (let sheet of document.styleSheets) {
    for (let rule of sheet.rules) {
        if (/:(before|after)$/.test(rule.selectorText)) {
            console.log(rule.style.content);
        }
    }
}

请注意，此处不处理@include-ed 样式表或-queries。@media可以通过分别检查是否rule.type为3或5并遍历styleSheet该规则的属性来访问它们。请参阅类型列表。