JavaScript implements modifying pseudo-class styles

In projects, we often need to use JavaScript to dynamically control the style of elements (:before,:after), but we all know that JavaScript or jQuery does not have pseudo-class selectors. In this article, we mainly introduce the method of modifying pseudo-class styles in JavaScript and the code implementation process.

HTML

Hi, this is a plain-old, sad-looking paragraph tag.

CSS

.red::before {
content: 'red';
color: red;
}

Method 1

Use JavaScript or jQuery to switch

The class name of the element, modify the style.

.green::before {
content: 'green';
color: green;
}
$('p').removeClass('red').addClass('green');

Method 2

Dynamically insert new styles into existing