Comment puis-je sélectionner et manipuler des pseudo-éléments CSS (comme ::before et ::after) avec JavaScript ou jQuery ?

Sélection et manipulation de pseudo-éléments CSS avec JavaScript ou jQuery

Utilisation de pseudo-éléments CSS, tels que ::before et ::after , peut ajouter un style supplémentaire à vos éléments sans ajouter de contenu supplémentaire au DOM. Cependant, sélectionner et manipuler ces pseudo-éléments peut être difficile.

Sélection de pseudo-éléments avec jQuery

jQuery vous permet de sélectionner des pseudo-éléments en utilisant la même syntaxe que pour les éléments réguliers. Par exemple, pour sélectionner le pseudo-élément ::after de la classe .span, vous utiliserez :

$('span:after')

Pour modifier le contenu 'foo' dans votre exemple, vous pouvez utiliser le jQuery css() méthode :

$('span:after').css('content', 'bar');

Utiliser Vanilla JS

Si vous préférez utiliser Vanilla JS, vous pouvez également sélectionner des pseudo-éléments à l'aide des sélecteurs :before et :after. Cependant, ils nécessitent une syntaxe plus complexe que jQuery :

document.querySelector('.span::after')

Pour modifier le contenu, vous pouvez utiliser la propriété style.content :

document.querySelector('.span::after').style.content = 'bar';

Manipulation du pseudo-élément Contenu avec jQuery

Une autre approche consiste à utiliser des attributs de données pour stocker le contenu des pseudo-éléments. Dans votre HTML :

<span data-content="foo"></span>

En jQuery, vous pouvez ensuite utiliser la méthode hover() pour mettre à jour le contenu au survol :

$('span').hover(function(){
    $(this).attr('data-content', 'bar');
});

En CSS, vous pouvez utiliser la méthode attr( ) pour accéder à l'attribut data-content et définir le contenu du pseudo-élément :

span:after {
    content: attr(data-content);
}

Cela vous permet de modifier le contenu du pseudo-élément sans ajouter de balisage supplémentaire ou remplaçant les règles CSS existantes.

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!