利用javascript获取并修改伪元素的值
HEAD
中添加style
标签强制覆盖初始属性
这个方法是利用内部css样式的高优先级来覆盖外部css,好处是简单易理解,实现简单。坏处就是吃相太难看,过于粗暴。
var style=document.createElement('style');
style.innerHTML=".test::before{color:green}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。
document.head.appendChild(style);
看到这里可能有些人反应过来了,其实加style
标签这种方法可以是insertRule
实现方法的大前提——因为不是所有页面一开始都有内嵌的style
样式的。这种方法虽然不是很好,但是有时候却又确确实实是必须的——比如“拖动滑块改变伪元素内文字大小”这个需求。
示例:
var style=document.createElement('style');
style.innerHTML=".antd-dataide-tabs-top-bar{margin-bottom:0 !important; background-color: yellow;}";//添加样式内容的话也可以用上面提到过的`insertRule`,相对例子里的硬编码会更优雅点。
document.head.appendChild(style);