Comment modifier les styles de pseudo-classe avec JavaScript

Nous avons tous entendu parler des pseudo-classes CSS mais pas que JavaScript ait aussi des pseudo-classes. Dans les projets, nous avons souvent besoin d'utiliser JavaScript pour contrôler dynamiquement les styles des pseudo-éléments (:before,:after), mais nous. tout le monde sait qu'il n'y a pas de sélecteurs de pseudo-classes en JavaScript ou jQuery. Voici un résumé de plusieurs méthodes courantes.

HTML

<p class="red">Hi, this is a plain-old, sad-looking paragraph 
tag.</p>
CSS
.red::before {
content: &#39;red&#39;;
color: red;
}

Méthode 1

Utilisez JavaScript ou jQuery pour changer le nom de classe de l'élément e388a4556c0f65e1904146cc1a846bee modifier le style.

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

Méthode 2

Insérez dynamiquement un nouveau style dans le c9ccee2e6ea535a969eb3f532ad9fe89 existant.

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

Méthode 3

Créez une nouvelle feuille de style et insérez-la dans le 93f0f5c25f18dab9d176bd4f6de5d30e 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);

Méthode 4

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

Utilisez l'attribut data de HTML5 et utilisez attr() dans l'attribut pour le modifier dynamiquement.

Voici les quatre méthodes que nous avons compilées pour vous sur la façon d'utiliser JavaScript pour modifier les styles de pseudo-classe. Nous espérons que cela vous sera utile.

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

Exemple d'analyse de la façon dont les pseudo-classes CSS3 créent des boutons 3D

Explication détaillée des exemples d'utilisation des pseudo-classes focus classes en CSS

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

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!