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

发布时间：2020-12-14 22:37:52 所属栏目：资源来源：网络整理

导读：有没有办法确定给定的HTML元素是否在不调用的情况下应用了伪元素(:: before / :: after) window.getComputedStyle(element,":before/:after"); 编辑：答案是否定的 getComputedStyle的问题在于性能.我需要验证页面上的每个元素是否有伪元素这就是性能非常关

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

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

编辑：答案是否定的

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

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

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

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

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

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

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

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

最佳答案

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

这种遍历元素的方法：

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

每1ms大约有数千个元素.

并且getComputedStyle的调用不应该太慢,因为它获取在调用时已经计算的数据(在渲染文档上).

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!