javascript - 如何在 JS 中获取对::before 或::after 节点的引用？

Question

据我所知，标准 JavaScript 无法获取 ::before 或 ::after 伪元素。 Element.children不会让你接触到它。

我知道必须有一种方法，至少在 Chrome 特权的 Firefox 附加代码中，因为它列出了页面中的每个 ::before 元素(并且显然 getComputedStyle() 在它也是，因为您可以在 inspector 中列出它的所有样式，它是用 JavaScript 编写的)。

此 API 的文档记录在哪里？它是仅在 Firefox 和 Chrome 浏览器中有所不同且享有特权的东西，还是有望很快成为标准的东西？

Answer 1

CSS 生成的内容不是 DOM 的一部分，您无法使用 ::before/::after 伪元素做很多事情，即使你得到他们。我能想到的唯一用例是:

• 访问伪元素上的 CSS 计算值。 window.getComputedStyle()通过可选的第二个参数支持这一点。

• 枚举生成的内容。你可以做到这一点:

  • 使用特定于浏览器的 API。在 Firefox 中，DevTools 检查器 uses特殊接口(interface) - inIDeepTreeWalker .

  • 或者通过遍历 DOM 并检查(对于每个元素)它在 :before/:after< 的计算样式中是否有 content/。例如:

    window.getComputedStyle(elt, ':before').content
    

• 获取 CSS 中定义的计数器的“实时”值，如 How to access CSS generated content with JavaScript - 有关详细信息，请参阅该问题。