JavaScript implémente la modification des styles de pseudo-classe

Dans les projets, il est souvent nécessaire d'utiliser JavaScript pour contrôler dynamiquement le style des éléments (:before,:after), mais nous savons tous que JavaScript ou jQuery ne disposent pas de sélecteurs de pseudo-classes. Dans cet article, nous présentons principalement la méthode de modification des styles de pseudo-classes en JavaScript et le processus d'implémentation du code.

HTML

Bonjour, ceci est une balise de paragraphe simple et triste.

CSS

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

Méthode 1

Utiliser JavaScript ou jQuery change le nom de classe de l'élément

et modifie le style.

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

Méthode deux

Insérez dynamiquement de nouveaux styles dans les