javascript - 如何判断HTML元素是否有伪元素？

Question

有没有一种方法可以确定给定的 HTML 元素在不调用的情况下应用了伪元素 (::before/::after)

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

已编辑:答案是否

getComputedStyle 的问题在于性能。我需要验证页面上的每个元素是否具有伪元素——这就是性能非常关键的原因。我尝试从 document.styleSheets 访问 cssRules 以查找末尾带有::before 或::after 的选择器，将其删除并找到与其余选择器匹配的元素，但此解决方案有其自身的问题:

• 无法访问来自不同域的样式表
• 可能有数以千计的 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");    
  ...
}

大约是每 1 毫秒 数千 个元素。

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

所以所有这些都应该足够快地工作。是的，它原则上是 O(N) 任务，但只运行一次，对吧？