如何更改伪元素的样式
原创
在前端开发中我们会经常用到伪元素，有时候需要通过js来修改伪元素的样式，那么有哪几种方式来修改伪元素的样式呢？
在解决这个问题之前先看看有哪些伪元素，伪元素有六个，分别是 ::after、::before、::first-line、::first-letter、::selection、::backdrop 。常用的是 ::after和::before。
伪元素用来做什么呢？
CSS 伪元素用于向某些选择器设置特殊效果。 使用伪元素来表示元素中的一些特殊位置 比如：
首字母：:first-letter ，首行：:first-line ，:brfore 表示元素最前面的部分，一般before都需要和content一起使用 ，:after 表示元素最后面的部分，一般after都需要和content一起使用 通过content可以向before和after添加一些内容，这些内容不能被选中。
伪元素的语法是什么样的？
伪元素的语法： selector:pseudo-element {property:value;}
CSS类也可以使用伪元素： selector.class:pseudo-element {property:value;}
在CSS3中，建议伪元素使用两个冒号(::)语法，而不是一个冒号 (:)，目的是为了区分伪类和伪元素。大多数浏览器都支持这两种表示语法。只有 ::selection 永远只能以两个冒号开头(::)。因为IE8只支持单冒号的语法，所以，如果你想兼容IE8，保险的做法是使用单冒号。
伪元素有哪些特点呢？
1、通过伪元素添加的内容不能被选中
2、伪元素添加的内容不会出现在DOM中，仅仅是在CSS渲染层中加入，所以不能直接通过js来获取
3、只能通过修改样式表的方式来修改伪元素。
这就绕到了我们开头的问题，首先看第一种方式，修改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');第二种方式在 <head> 标签中插入 <style> 的内部样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
</head>
<body>
<div class="red"></div>
<div id="blanc">id</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
document.styleSheets[0].insertRule('.red::before { color: green ;content:"oooooiii"}', 0); // 支持非IE的现代浏览器
})
</script>
</body>
</html>第三种方式使用CSSStyleSheet的insertRule来为伪元素修改样式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="red"></div>
<div id="blanc">id</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$(function(){
var style = document.createElement("style");
document.head.appendChild(style);
sheet = style.sheet;
// sheet.addRule('.red::before', 'color: green'); // 兼容IE浏览器
sheet.insertRule('.red::before { color: green;content:"232213323131" }', 0); // 支持非IE的现代浏览器
sheet.insertRule("#blanc { color: red }", 1);
})
</script>
</body>
</html>第二种方式和第三种方式基本是一样的，我不推荐这两种方式，我更倾向于第一种方式，修改伪元素的样式，建议使用通过更换class来修改样式的方法。因为其他两种通过插入行内CSSStyleSheet的方式是在JavaScript中插入字符代码，不利于样式与控制分离；而且字符串拼接易出错。
以上便是通过js修改伪元素样式的方法，希望对你有所帮助。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。