js如何控制css偽元素內容（before，after）

原文:js如何控制css偽元素內容（before，after）

js如何控制css偽元素（before，after）

@(CSS 筆記)[偽元素|css3]
曾經遇到的問題，在對抗UC瀏覽器遮蔽需要把內容輸出到css 偽元素中輸出。有個疑問如何用js控制它。於是在segmentfault提問，如下是對問題的整理：

如何用js控制css偽類after

簡單粗暴的方式：

簡單粗暴的方式，直接在html中新增樣式覆蓋掉之前樣式規則

<style>
	p:after{content:`我是字尾`}
</style>
<p>正文內容</p>

<script>
var css=function(t,s){
    s=document.createElement(`style`);
    s.innerText=t;
    document.body.appendChild(s);
};

document.onclick=function(){
    css(`p:after{content:`修改一下`}`);
};
</script>

進化版

這樣寫了功能實現了，優雅欠佳，作為進化版，其實就是用class名來重寫樣式，

p:after{content:`我是字尾`}
p.change{content:`我是修改過的字尾`}

只要在需要的時候，給p標籤新增change這個class就可以實現替換的目的。原理和第一個沒什麼區別。這樣寫的好處是，改變起來更優雅靈活，用class做了個鉤子。

再進化版

上個版本已經解決了切換的問題，如果有更多可以不斷的切換class，但是想下這種方式也還是有點笨重，因為可能要寫很多css，如果是想換的內容是不確定的，需要用變數來處理呢？這時候，可能會想到用 第一種方法就可以了，但是第一種方式真的不是很優雅。還有什麼方式呢？
在css中，偽元素的content是能讀取到data屬性的。
也就是說我們可以這樣寫css

p:after {
	content: attr(data-content);
}

在進化版是第二版的變種，

css檔案

p.change:after {
	content: attr(data-content);
}

js檔案

$(this).addClass(`change`).attr(`data-content`, content);

這樣你就可以隨意改動了。

不是終極版的終極版

最後一種方法是由bumfod提供方法很hack了，遍歷了所有的css文件，找到偽元素，然後更改，有興趣的同學可以嘗試下
http://jsfiddle.net/s3fv8e5v/4/