如何读写伪类元素的样式?示例:
Html代码<pclass="example"data-pseudo="(i'mcontent.)">Hi,thisisaplain-old,sad-lookingparagraphtag.</p><divid="log"></div><style>.example::before{content:'pseudoElement';color:red;}</style>一、读取,使用 window.getComputedStyle 方法:
Js代码<script>varstr=window.getComputedStyle(document.querySelector('.example'),'::before').getPRopertyValue('color');document.querySelector('#log').innerHTML=str;</script>二、写(修改)没有办法。至少没有直接的方法,退而次之,只能通过覆盖样式的途径来达到我们的目的。譬如:添加一个style元素,并写入新的样式;又或者是给目标元素添加不同的class,以达到控制的效果。示例:
Html代码<styleid="pseudoStyle"></style>
Js代码<script>document.querySelector('#pseudoStyle').sheet.insertRule(".example::before{color:green;}",0);//或者是document.querySelector('#pseudoStyle').sheet.addRule('.example::before','color:green');//setProperty在这时候,会抛异常:try{window.getComputedStyle(document.querySelector('.example'),'::before').setProperty('color',"green");}catch(e){document.querySelector('#log').innerHTML=e;}</script>伪类元素,有个属性比较特殊:content。由于它的值可以定义为从元素的dom属性获取,从而可以实现js的直接读写。例如:
Html代码<style>.example::before{content:attr(data-pseudo);color:red;}</style>
Js代码<script>document.querySelector('.example').setAttribute("data-pseudo","newcontent!");</script>附录:1. styleSheet对象的方法、属性和浏览器兼容,参考:http://help.dottoro.com/ljpatulu.php2. getComputedStyle方法,参考:http://help.dottoro.com/ljscsoax.php , https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle