用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