伪元素的内容可以是HTML吗,如何确定HTML元素是否具有伪元素?

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

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

已编辑:答案为否

getComputedStyle的问题在于性能。我需要验证页面上的每个元素是否有伪元素 - 这就是性能非常关键的原因。

我试图从document.styleSheets访问cssRules以找到选择器,最后使用:: before或:: after,删除它并找到与其余选择器匹配的元素,但是这个解决方案有它自己的问题:

来自不同域的styleSheets无法访问

可能需要检查数千个cssRule(再次表现)

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

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

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

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

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

如果此伪元素具有背景图像,则缩放元素

如果此伪元素只有文本,则将其颜色更改为红色

等...

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值