如何确定HTML元素是否具有伪元素？

Question

有没有办法确定给定的HTML元素是否在不调用的情况下应用了伪元素(::before/ ::after)

window.getComputedStyle(element, ":before/:after");

编辑:答案是否定的

getComputedStyle的问题在于性能.我需要验证页面上的每个元素是否有伪元素 - 这就是性能非常关键的原因.我试图从document.styleSheets访问cssRules以找到最后使用:: before或:: after的选择器,删除它并找到与其余选择器匹配的元素,但是这个解决方案有它自己的问题:

• 来自不同域的styleSheets无法访问
• 可能有成千上万的cssRules要检查(再次表现)

我还尝试比较元素的大小和偏移量有无元素,但没有任何效果.即使没有准确的方法,我也很乐意找到一种方法来削减一定数量的元素,至少检查30%.

---

当我确定该元素有一个伪元素时,我终于可以调用getComputedStyle来研究伪元素样式并进行更改.这部分完美有效.

---

编辑:我无法控制源页面.页面样式可以从不同的域动态上传.假设我的代码是内容脚本或库,例如必须将所有伪元素前景更改为基于该伪元素的其他CSS属性计算的某些颜色.

因此,主要问题是更改基于其他CSS属性,并且您无法在不实际检索伪元素的计算样式和计算更改的情况下为所有伪元素设置相同的样式.

例如,您有youtube.com页面,您需要找到所有伪元素和

• 如果此伪元素具有背景图像,则缩放元素
• 如果此伪元素只有一个文本,则将其颜色更改为红色
• 等等...

Answer 1

究竟是什么导致您现有的解决方案出现问题？

这种遍历元素的方法：

var allElements = document.getElementsByTagName("*");
for (var i = allElements.length; i--;) {
  //var usedStyle = window.getComputedStyle(allElements[i], ":before/:after");    
  ...
}

大约有数千元素。

并召唤getComputedStyle不应太慢，因为它获取在调用时（在呈现的文档上）已经计算的数据。

所以这一切真的应该足够快。是的，O(N)原则上它是任务，但运行一次，对吧？