摘要：利用方法選擇到偽元素，然后利用方法獲取對應(yīng)的屬性的值。具體用法可以參考的這篇文章而偽元素的屬性值除了常規(guī)賦值外，還有一種特殊的方法來獲取。具體實(shí)現(xiàn)參照，不再做具體分析參考文獻(xiàn)獲取元素值之方法熟悉

雖然標(biāo)題里寫的是偽元素,不過這篇文章主要是說::before和::after，其余幾個(gè)偽元素（::first-letter、::first-line、::selection等)由于沒有content屬性，所以本文一筆帶過，其實(shí)方法是一樣的。
偽元素的重點(diǎn)在于一個(gè)偽，雖然它們可以被瀏覽器渲染引擎識別并正確渲染，然而偽元素本身并不是DOM元素,所以無法被js直接操作——因此任何基于JS直接選取DOM元素的CSS更改方法對偽元素都不起作用。（JQ看似萬能，這個(gè)問題上是直接就栽了。因?yàn)镴Q的選擇符都是基于DOM元素）關(guān)于JS和JQ選擇器，可以參考這兩篇文檔： Selectors API Level 1、jQuery Selectors

雖然JS里沒有可以直接操作偽元素的選擇符，然而獲取其CSS屬性的方法還是有的。

利用window.getComputedStyle方法選擇到偽元素，然后利用getPropertyValue方法獲取對應(yīng)的屬性的值。
根據(jù)MDN的文檔，

window.getComputedStyle(element[, pseudoElt]);

此方法包含兩個(gè)參數(shù)，一個(gè)是元素本身另一個(gè)是元素的偽元素。
js語法實(shí)例（完整DEMO在線鏈接）：

var div=document.querySelector("div");
var fontSize=window.getComputedStyle(div,"::before").getPropertyValue("font-size");//獲取before偽元素的字號大小

關(guān)于這個(gè)方法，詳解可以參考這篇文章：
獲取元素CSS值之getComputedStyle方法熟悉

window.getComputedStyle方法雖然可以獲取到偽元素的屬性值，然而根據(jù)該方法名字也知道其只能獲取CSS樣式，并無法更改css屬性，那么如果想要用js動(dòng)態(tài)更改偽元素屬性值的話，該怎么處理呢？
思路有以下幾個(gè)：

js更改data-*屬性值來更改偽元素的content值

創(chuàng)建多個(gè)class，通過切換class來達(dá)到改變樣式的目的

利用CSSStyleSheet的insertRule方法來添加樣式

利用內(nèi)部css樣式的高優(yōu)先級來覆蓋外部css

以上實(shí)現(xiàn)思路的推薦程度依次遞減

data-*是HTML5新增的DOM元素屬性，作用大致可以理解為標(biāo)記。具體用法可以參考MDN的這篇文章.而偽元素的content屬性值除了常規(guī)賦值外，還有一種特殊的attr()方法來獲取。
HTML：

CSS:

.test::before{
    content: attr(data-text);
}

結(jié)果:

TEXT

另外content其實(shí)可以多個(gè)attr連寫，而且attr()內(nèi)的可以是DOM元素的任意屬性（比如class等，甚至非W3C標(biāo)準(zhǔn)屬性也支持，不過不推薦這么做)所以很方便湊一些模版文字。像下面這種寫法也是完全沒問題的。注意用空格連接，不要用"+"號。
EXAM：

.test::before {
  content: "我的類是" attr(class) "想要變成" attr(data-color);
}

雖然W3C給attr()賦予了無限可能性,包括color,width等屬性在未來都有希望用這個(gè)方法更改，然而目前只有content支持該方法，其余的都還是草稿狀態(tài)，尚未有瀏覽器支持。之所以把這個(gè)方法放在第一位只是因?yàn)橄啾葎e的實(shí)現(xiàn)手法來說，這個(gè)方法真的太簡單太優(yōu)雅。

但是如果真的想要改偽元素里的color等元素呢？

把這個(gè)方法放到推薦位第二位估計(jì)會(huì)被很多人罵我：“臥槽，這么簡單又沒逼格的辦法你竟然放到第二位！太沒水平了”。不過再看完后面兩種方法后或許你會(huì)對這種看法有所改觀。
這個(gè)方法的優(yōu)點(diǎn)是簡單好用且無兼容性問題。缺點(diǎn)是多了一些其實(shí)用處不大的class,很像是jQuery類選擇器中毒患者的做法；另外不適合多狀態(tài)的場景（比如實(shí)時(shí)改變偽元素文字大小等）。
實(shí)現(xiàn)過于簡單就不貼代碼了。

前面的class切換大法可能讓人感覺不痛快，這里來個(gè)高大上(偽)點(diǎn)的方法：

這部分內(nèi)容和W3C標(biāo)準(zhǔn)牽連比較多，加上較冷門，沒多少人關(guān)注，個(gè)人目前啃不動(dòng)標(biāo)準(zhǔn)，所以這部分內(nèi)容不會(huì)做深入分析，理解可能也會(huì)有問題，望斧正。

CSSStyleSheet是瀏覽器存放頁面內(nèi)所有css樣式表的對象方法（不包括行內(nèi)樣式)，每個(gè)link和style標(biāo)簽都代表一個(gè)CSSStyleSheet對象，獲取他們可以用document.styleSheets方法。(需要注意的是雖然styleSheets方法返回的結(jié)果把link標(biāo)簽引進(jìn)的外部樣式也算進(jìn)去了，但是非IE瀏覽器沒辦法獲取到他們的cssRules屬性，只有內(nèi)嵌的style標(biāo)簽內(nèi)的元素可以被獲取到)

document.styleSheets[0].insertRule(".test::before{color:green}",0)//chrome,firefox等非IE瀏覽器使用
document.styleSheets[0].addRule(".test::before{color:green}",0)//IE系列瀏覽器使用
/* 雖然部分瀏覽器也可以通過id來指定,"document.styleSheets.id.insertRule()"這種寫法在chrome和IE下都行得通，但是firefox會(huì)返回"undefined",所以建議還是使用index值來獲取stylesheet */

.insertRule的語法是stylesheet.insertRule(rule, index),另一個(gè)參數(shù)是index，意思是在對應(yīng)的styleSheets里的cssRules樣式表中的位置，這個(gè)值越大則樣式優(yōu)先級越高，但是值不能超過當(dāng)前樣式表規(guī)則（cssRules）長度（CSS中先定義的樣式總是會(huì)被后定義的覆蓋就是這個(gè)緣故。），當(dāng)值小于cssRules長度時(shí)，添加的樣式規(guī)則會(huì)插入到index值定義的位置，之前其余的規(guī)則依次順延。

addrule和insertRule方法本質(zhì)上沒區(qū)別，只是后者不被IE瀏覽器識別，所以前者作為瀏覽器兼容方法存在。（下文為節(jié)省篇幅，以insertRule方法指代此兩種方法。)

上面的代碼看似簡單一行，然而卻不是每次都有效的。原因有以下幾點(diǎn)：

document.styleSheets雖然按照style和link的順序返回對應(yīng)的StyleSheetList，然而第一個(gè)如果是link而不是style,前面講過此時(shí)無法獲取對應(yīng)的cssRules，則document.styleSheets[0].cssRules為null，insertRule方法不起作用。（此情況只針對非IE瀏覽器，IE瀏覽器正常，但是定義的早往往意味著被后面的樣式覆蓋，所以意義不大）

同上，如果頁面內(nèi)沒有內(nèi)嵌樣式的style標(biāo)簽，則insertRule方法也無法發(fā)揮作用。

index值不夠大的話很有可能會(huì)早于css文件開始的定義位置，導(dǎo)致被覆蓋。因此有個(gè)折衷辦法就是給添加的樣式增加!important，雖然我個(gè)人比較反感這么做。

由此可見此方法的局限性，但是這種方法的優(yōu)雅之處在于避免了直接寫內(nèi)嵌樣式，而是通過css api來做更改。相比下面的方法來說，稍微好點(diǎn)。

但是這種方法好像局限性有點(diǎn)大??？

這個(gè)方法是利用內(nèi)部css樣式的高優(yōu)先級來覆蓋外部css，好處是簡單易理解，實(shí)現(xiàn)簡單。壞處就是吃相太難看，過于粗暴。

var style=document.createElement("style");
style.innerHTML=".test::before{color:green}";//添加樣式內(nèi)容的話也可以用上面提到過的`insertRule`,相對例子里的硬編碼會(huì)更優(yōu)雅點(diǎn)。
document.head.appendChild(style);

看到這里可能有些人反應(yīng)過來了，其實(shí)加style標(biāo)簽這種方法可以是insertRule實(shí)現(xiàn)方法的大前提——因?yàn)椴皇撬许撁嬉婚_始都有內(nèi)嵌的style樣式的。這種方法雖然不是很好，但是有時(shí)候卻又確確實(shí)實(shí)是必須的——比如“拖動(dòng)滑塊改變偽元素內(nèi)文字大小”這個(gè)需求。

拖動(dòng)滑塊改變偽元素內(nèi)的文字大小

且偽元素內(nèi)隨時(shí)顯示當(dāng)前字號

通過一個(gè)按鈕可以改變偽元素內(nèi)文字顏色

這個(gè)需求可以將本文前面提到的四種改變偽元素樣式的方法都塞進(jìn)去。具體實(shí)現(xiàn)參照DEMO，不再做具體分析：

http://codepen.io/chitanda/pen/OVBJEw/

getComputedStyle()

Window.getComputedStyle()

獲取元素CSS值之getComputedStyle方法熟悉

attr-notation

W3C CSS3-Attribute References: ‘a(chǎn)ttr()’

MDN ATTR()

CSSRules

CSSRule object

MDN insertRule

Dynamic style - manipulating CSS with JavaScript

Add Rules to Stylesheets with JavaScript

Modify pseudo element styles with JavaScript

Add css-rules to an existing stylesheet