js如何动态选择和操作 CSS 伪元素，例如 ::before 和 ::after

港控/mmm° 2022-09-16 14:30 629阅读 0赞

![2a352b4d6645a9014ba2f5652d0601fd.png][]

## **什么是伪元素** ##

伪元素用于向某些选择器设置特殊效果。

已存在元素是指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);

addRule说明：

document.styleSheets[0].addRule('.className'或‘#ID’ +‘::after’,css样式字符串拼接).

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的属性值 ##

使用CSSStyleSheet的insertRule来为伪元素修改样式

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

注意

*  伪元素的 content 属性很强大，可以写入各种字符串和部分多媒体文件。但是伪元素的内容只存在于CSS渲染树中，并不存在于真实的DOM中。所以为了seo优化，最好不要在伪元素中包含与文档相关的内容。
 *  修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。
 *  修改伪元素的content属性的值，建议使用利用DOM的 data-\* 属性来更改。

#  #

**学习更多技能**

**请点击下方公众号**

![296b2a4a7f9ff57f496e244cbe11f917.gif][]

![ff4390c41274e85771f72492104c6b23.png][]

![4fc67b6ad248f77f0070c373feed4f7a.png][]

[2a352b4d6645a9014ba2f5652d0601fd.png]: /images/20220828/c8d95b4598a24609b4d16f601d0171f3.png
[296b2a4a7f9ff57f496e244cbe11f917.gif]: /images/20220828/339e795efd8042da8de0fd0b91e34645.png
[ff4390c41274e85771f72492104c6b23.png]: /images/20220828/800194485b314a798355f2a791cb73d9.png
[4fc67b6ad248f77f0070c373feed4f7a.png]: /images/20220828/615a63d0f4a141519e25708b6df8b4b9.png