如何获取伪元素？

Question

我需要获取 :after 并将其分配给变量。有可能的？

querySelectorAll 不起作用。

 alert(some_div_with_pseudo.querySelectorAll('::after')[0]) // undefined

原文由 A. Petrov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

简短的回答是你不能。它还没有。

JavaScript 可以访问 DOM，它是在从 HTML 加载页面时构建的，并在 JavaScript 操作它时进一步修改。

伪元素 由 CSS 生成，而不是 HTML 或 JavaScript。它的存在纯粹是为了给 CSS 一些可以依赖的东西，但这一切都是在 JavaScript 毫不知情的情况下发生的。

这是应该的。在总体方案中，页面以 HTML 开始。一方面可以使用 JavaScript 修改其行为和操作内容，另一方面可以使用 CSS 控制结果的呈现：

 HTML [→ JavaScript] → CSS → Result

你会看到带有伪元素的 CSS 出现在最后，所以 JavaScript 看不到。

也可以看看：

• https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#Usage_notes
• https://www.w3.org/TR/selectors-api/#grammar

编辑

似乎在现代 JavaScript 中有一个使用 window.getComputedStyle(element,pseudoElement) 的解决方法：

 var element = document.querySelector(' … ');
var styles = window.getComputedStyle(element,':after')
var content = styles['content'];

原文由 Manngo 发布，翻译遵循 CC BY-SA 4.0 许可协议