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

6f23bfb838f442699a99d538155cf763Bonjour, ceci est une balise de paragraphe simple et triste.94b3e26ee717c64999d7867364b1b4a3

CSS

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

Méthode 1

Utiliser JavaScript ou jQuery change le nom de classe de l'élément e388a4556c0f65e1904146cc1a846bee 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 c9ccee2e6ea535a969eb3f532ad9fe89 existants.

document.styleSheets[0].addRule('.red::before','color: green');
document.styleSheets[0].insertRule('.red::before { color: green }', 0);

Méthode 3

Créer une copie Nouvelle feuille de style et insérez-la dans le 93f0f5c25f18dab9d176bd4f6de5d30e en utilisant JavaScript ou jQuery

// 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

$(&#39;<style>.red::before{color:green}</style>&#39;).appendTo(&#39;head&#39;);

Méthode 4

Utiliser les données HTML5 -attribute et utilisez attr() dans l'attribut pour le modifier dynamiquement.

<p class="red" data-attr="red">Hi, this is plain-old, sad-looking paragraph tag.</p>
.red::before {
content: attr(data-attr);
color: red;
}
$(&#39;.red&#39;).attr(&#39;data-attr&#39;, &#39;green&#39;);

Recommandations associées :

Résumé du sélecteur de pseudo-classe

En PHP Pseudo -types et pseudo-variables

Fonctions de paramètres régulières des fonctions PHP et fonctions de paramètres de pseudo-type

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!