js如何動態控制偽元素

什么是偽元素

偽元素用於向某些選擇器設置特殊效果。
已存在元素是指DOM中存在的，偽元素則是虛擬的一種，樣式也是給這個虛擬的元素使用的。
比如偽元素 :before和:after，用於在CSS渲染中向元素的頭部或尾部插入內容，它們不受文檔約束，也不影響文檔本身，只影響最終樣式。這些添加的內容不會出現在DOM中，僅僅是在CSS渲染層中加入。它不存在於文檔中，所以JS無法直接操作它。而jQuery的選擇器都是基於DOM元素的，因此也並不能直接操作偽元素。

哪些是偽元素

• :first-letter：向文本的第一個字母添加特殊樣式。　
• :first-line:　向文本的首行添加特殊樣式。　
• :before：在元素之前添加內容。　
• :after：在元素之后添加內容。　
• ::placeholder：匹配占位符的文本，只有元素設置了placeholder屬性時，該偽元素才能生效。（只支持雙冒號的形式）。
• ::selection：CSS偽元素應用於文檔中被用戶高亮的部分（比如使用鼠標或其他選擇設備選中的部分）。（只支持雙冒號的形式）。　
• ::backdrop(處於試驗階段)：用於改變全屏模式下的背景顏色，全屏模式的默認顏色為黑色。（只支持雙冒號的形式）。

更改偽元素的樣式

1.更換class來實現偽元素屬性值的更改：

// CSS代碼
.red::before { content: "red"; color: red; }
.green::before { content: "green"; color: green; }

// HTML代碼
<div class="red">測試測試</div>

// jQuery代碼
$(".red").removeClass('red').addClass('green');

2.使用CSSStyleSheet的insertRule來為偽元素修改樣式：

// HTML代碼
<div class="red">測試測試</div>

// js代碼
// 支持IE
document.styleSheets[0].addRule('.red::before','content: "red";color: red;');
// 支持非IE的現代瀏覽器
document.styleSheets[0].insertRule('.red::before { content: "red";color: red; }', 0);

MDN的addRule
MDN的insertRule

3.在標簽中插入

// HTML代碼
<div class="red">測試測試</div>

//js代碼
var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
// 兼容IE瀏覽器
sheet.addRule('.red::before','content: "red";color: red;'); 
// 支持非IE的現代瀏覽器
sheet.insertRule('.red::before { content: "red";color: red; }', 0);

// 亦可以使用 JQuery:
$('<style>.red::before{content: "red";color:red;}</style>').appendTo('head');

修改偽元素的content的屬性值

1. 使用CSSStyleSheet的insertRule來為偽元素修改樣式

var latestContent = "新修改的內容";
// 兼容IE瀏覽器
document.styleSheets[0].addRule('.jadeId::before','content: "' + latestContent + '"');
// 支持非IE的現代瀏覽器
document.styleSheets[0].insertRule('.jadeId::before { content: "' + latestContent + '" }', 0);

2. 使用DOM元素的 data-* 屬性來更改content的值

// CSS代碼
.jadeId::before {
  content: attr(data-attr);
  color: red;
}

// HTML代碼
<div class="jadeId" data-attr="jadeId">測試測試</div>

// JacaScript代碼
$('.jadeId').attr('data-attr', '新修改的內容');

注意

• 偽元素的 content 屬性很強大，可以寫入各種字符串和部分多媒體文件。但是偽元素的內容只存在於CSS渲染樹中，並不存在於真實的DOM中。所以為了SEO優化，最好不要在偽元素中包含與文檔相關的內容。

• 修改偽元素的樣式，建議使用通過更換class來修改樣式的方法。因為其他兩種通過插入行內CSSStyleSheet的方式是在JavaScript中插入字符代碼，不利於樣式與控制分離；而且字符串拼接易出錯。

• 修改偽元素的content屬性的值，建議使用利用DOM的 data-* 屬性來更改。