我正在开发一个Chrome扩展,我面临着一个问题,我需要覆盖CSS类本身的样式属性,而不仅仅是该类的单个元素。具体来说,我想修改页面样式中特定CSS类的background-color等属性。
我的用例涉及到动态地改变网页上使用特定CSS类的元素的外观。但是,需要注意的是,我不想将样式应用于该类的每个单独元素,而是应用于类定义本身。
我尝试了几种方法,包括使用JavaScript向类添加新样式,以及使用MutationObserver和Intersection Observer API来监视更改,但这些方法都没有按预期工作。
我正在寻找指导如何以编程方式定位和修改CSS类的样式属性定义在页面的样式从Chrome扩展。如果有一个特定的Chrome扩展API或方法可以帮助实现这一点,我将非常感谢任何见解或代码示例来实现这一点。
example:I load page x/page/ this page has it's own .css styles(which have a dynamic name,and often are unloaded after being injected)应用的css类之一是example ._blablabla and has background-color #00000我想将._blablabla的background-color改为红色,这样即使动态加载新元素,它们也会使用修改后的类,该类将具有红色。
我尝试过自己编辑元素,但我的方法失败了,因为它们是通过滚动动态加载的,我尝试过的添加侦听器的每一种方法都不起作用,我不想一直循环来检测新元素。
1条答案
按热度按时间zkure5ic1#
MutationObserver应该可以正常工作。使用mutation.type =“childList”观察新的动态元素。
CSS是层叠的,这意味着你应该直接更改目标元素的内联样式以获得最高优先级。