javascript - 如何获取伪元素？

Question

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

querySelectorAll 不起作用。

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

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'];