用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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM