使用JavaScript修改伪类样式的方法

项目中时常会需要用到使用JavaScript来动态控制为元素(:before,:after)的样式，但是我们都知道JavaScript或jQuery并没有伪类选择器。这里总结一下几种常见的方法。

HTML

1	`<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:

1	`$('<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');