项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式，但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。
HTML
<p class="red">Hi, this is a plain-old, sad-looking paragraph tag.</p>
CSS
.red::before {
content: ‘red‘;
color: red;
}
方法一：使用JavaScript或者jQuery切换<p>元素的类名，修改样式。
.green::before {
content: ‘green‘;
color: green;
}
$(‘p‘).removeClass(‘red‘).addClass(‘green‘);
方法二：在已存在的<style>中动态插入新样式。
#我使用的是这个方法去向某个伪类改变的样式，其他的都没试的哈，大家可试试的，有结果了告诉博主一声哦
document.styleSheets[0].addRule(‘.red::before‘,‘color: green‘);
document.styleSheets[0].insertRule(‘.red::before { color: green }‘, 0);
-----------------------------------------------------------------------------------------------------------------------------------------------------
自己的代码检验
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>23、提交按钮加载动画效果 </title>
<link rel="stylesheet" href="../css/font-awesome-4.7.0/css/font-awesome.min.css">
<style>
/*将内外边距清除掉*/
*{
padding: 0;
margin: 0;
}
body{
width: 100vw;
height: 100vh;
display: grid;
display: grid;
grid-template: 1fr/1fr
}
button{
width: 200px;
height: 50px;
background: #ecf0f1;
color:#34495e ;
border: solid 1px #ddd;
/*下面的这两句话是使得grid（栅格化布局）中的文本水平居中+垂直居中*/
justify-self: center;
align-self: center;
}
button::after{
content: ‘‘;
width: 3px;
height: 3px;
/*使得制作影子的这块块级元素变为行内元素*/
display: inline-block;
animation-name: none; /*!!!!!!! animation-name: hd;这个代码可以通过js控制，当点击的时候加上这个动画属性，当不点击的时候就去掉这个动画name*/
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes hd {
from{
box-shadow: none;
}
30%{
box-shadow: 4px 0 0 currentColor;
}
60%{
box-shadow: 4px 0 0 currentColor,11px 0 0 currentColor;
}
90%{
box-shadow: 4px 0 0 currentColor,11px 0 0 currentColor,18px 0 0 currentColor;
}
}
</style>
<!--animation--->
</head>
<body>
<!--
<div>
</div>
-->
<button class="bu">动态按钮</button>
</body>
<script src="../../MyEcharts/js/jquery.js"></script>
<script type="text/javascript">
$(".bu").click(function (){
// alert(‘00‘);
document.styleSheets[0].addRule(‘.bu::after‘,‘animation-name:hd‘);
document.styleSheets[0].insertRule(‘.bu::after{animation-name:hd}‘,0);
})
</script>
</html>
方法三：创建一份新的样式表，并使用JavaScript或jQuery将其插入到<head>中
// Create a new style tag
var style = document.createElement("style");
// Append the style tag to head
document.head.appendChild(style);
// Grab the stylesheet object
sheet = style.sheet
// Use addRule or insertRule to inject styles
sheet.addRule(‘.red::before‘,‘color: green‘);
sheet.insertRule(‘.red::before { color: green }‘, 0);
jquery:
$(‘<style>.red::before{color:green}</style>‘).appendTo(‘head‘);
方法四：使用HTML5的data-属性，在属性中使用attr()动态修改。
<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$(‘.red‘).attr(‘data-attr‘, ‘green‘);
自己测试过这些方法，都可以解决修改伪类样式，但是都存在局限性，希望给读者能提出更好的解决方法，希望前端能够越来越强大
原文：https://www.cnblogs.com/isme-zjh/p/13573665.html