如何讀寫僞類元素的樣式？

示例： 

<p class="example" data-pseudo="(i'm content.)">Hi, this is a plain-old, sad-looking paragraph tag.</p>
<div id="log"></div>

<style>
.example::before {
    content: 'pseudoElement ';
    color: red;
}
</style>

1、讀取，使用 window.getComputedStyle 方法： 

<script>
var str = window.getComputedStyle(document.querySelector('.example'), '::before').getPropertyValue('color');

document.querySelector('#log').innerHTML = str;

</script>

2、寫（修改） 

沒有辦法。至少沒有直接的方法，退而次之，只能經過覆蓋樣式的途徑來達到咱們的目的。 
譬如：添加一個style元素，並寫入新的樣式;又或者是給目標元素添加不一樣的class，以達到控制的效果。 

示例： 

<style id="pseudoStyle">
</style>

<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的直接讀寫。 
例如： 

<style>
.example::before {
    content: attr(data-pseudo);
    color: red;
}
</style>

<script>
    document.querySelector('.example').setAttribute("data-pseudo","new content!");
</script>

附錄： 
1. styleSheet對象的方法、屬性和瀏覽器兼容，參考：http://help.dottoro.com/ljpatulu.php 
2. getComputedStyle方法，參考：http://help.dottoro.com/ljscsoax.php , https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle