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/