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

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中定义的原始值？即使Chrome的独家方法也可以，只要它可以在JavaScript中使用。

---

情况解释

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

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

屏幕阅读器可以读取CSS伪元素，目前无法轻易地将它们隐藏在屏幕阅读器之外。解决该问题的常用方法是使用<span aria-hidden="true">...</span>之类的HTML代码，而不是方便的CSS伪元素和speak: never，在我看来，这种方法不方便且令人失望。

所以这个polyfill主要是关于web可访问性。

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

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

然后在JavaScript中，polyfill遍历页面上的每个元素，并检查其伪元素::before和::after的CSS content属性值是否包含attr(speak-never)。如果找到该指示符字符串，则polyfill将修复伪元素（通过以编程方式添加自定义元素<before aria-hidden="true">...</before>和<after aria-hidden="true">...</after>）。

现在问题是Chrome无法在JavaScript中返回所述attr(speak-never)。虽然polyfill也可以通过要求CSS开发人员为Chrome添加另一个指标（如--speak: never）来工作，但是polyfill最好让CSS开发人员的工作尽可能简单，并且不需要额外的--speak: never指标。

这就是为什么这个问题被创造出来的原因。

---

更新

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

Answer 1

不确定添加像attr(speak-never)这样的东西比通过HTML标记更清晰......

但是这个问题指出了一个有趣的事情：Chrome已经开始实施CSSTypedOM，我们应该能够使用它来查找原始值集，如in this answer所示。

但是，为了定位伪元素，计划将有一个PseudoElement interface，以及Element元素的扩展，以便我们可以调用Element.pseudo(::type)来定位其伪元素。但Chrome的这部分规范尚未实现，因此实际上目前无法访问Chrome中的伪元素TypedValues。

因此，这让我们自己解析样式表，所有注意事项都使得w3c开发出一个真正的API：无法访问跨源样式表，没有直接的方法来了解规则是否在元素上是活动的，或者是否有另一个规则更重要的是......

Answer 2

您可以通过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样式表或@media查询。可以通过检查rule.type分别是3或5并遍历该规则的styleSheet属性来访问它们。见list of types。