用JS修改伪类/元素的样式

在不能修改HTML和CSS的前提下，如果要用JS修改伪类可以这样做：

原本的代码：

<style>

li:before{content:"·"}

</style>

<ul>

　　<li>日曜日</li>

　　<li>月曜日</li>

　　<li>火曜日</li>

　　<li>水曜日</li>

　　<li>木曜日</li>

　　<li>金曜日</li>

　　<li>土曜日</li>

</ul>

 

添加的JavaScript：

var style = document.createElement("style");

var text = document.createTextNode("ul li:before{content:"*";}");

style.appendChild(text);

document.body.appendChild(style);

 

如上，可以通过JavaScript创建嵌入的样式将原本伪类/元素的样式覆盖掉即可。

注意，新的选择器的权值一定要比原本选择器的权值高（参考CSS选择器优先级）

 

另外，支持querySelector的浏览器也是可以选择伪类的，但那样做要写很多代码，还要考虑兼容性，不如使用这种方式！

 

 

以上！

adam

 

转载于:https://www.cnblogs.com/adam-tp/p/4724423.html