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的专有方法也可以。

情况说明

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

我正在尝试在伪元素上为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属性的值是否包含{{1 }}。如果找到了该指示符字符串，则polyfill会修复伪元素（通过以编程方式添加自定义元素attr(speak-never)和<before aria-hidden="true">...</before>）。

现在的问题是Chrome无法使用JavaScript返回所说的<after aria-hidden="true">...</after>。尽管polyfill也可以通过要求CSS开发人员为Chrome添加更多指标（例如attr(speak-never)）来工作，但polyfill最好使CSS开发人员的工作尽可能简单，并且不需要额外的{{1} }指示器。

所以这就是创建这个问题的原因。

更新

我决定改用--speak: never作为指示符，因为所有浏览器都可以用JavaScript读取它。

Answer 1

不确定添加attr(speak-never)之类的内容是否比通过HTML标记更干净...

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

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

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

Answer 2

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

这是遵守xor eax,eax和printf元素中直接定义的规则的基本方法：

<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是@media还是rule.type并遍历该规则的3属性来访问它们。参见list of types。

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

2 个答案: