用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