Comment puis-je modifier dynamiquement le contenu des pseudo-éléments CSS avec JavaScript ou jQuery ?

Manipulation des pseudo-éléments CSS avec JavaScript et jQuery

La possibilité de modifier dynamiquement le contenu des pseudo-éléments CSS (par exemple, :: avant, ::après) l'utilisation de JavaScript ou de jQuery peut être très utile.

jQuery Solution

Pour modifier le contenu d'un pseudo-élément à l'aide de jQuery, vous pouvez suivre les étapes suivantes :

1. Sélectionnez l'élément auquel le pseudo-élément est attaché.
2. Utilisez le sélecteur :after ou :before pour cibler le pseudo-élément.
3. Définissez la propriété de contenu sur la valeur souhaitée value.

Par exemple, pour modifier le pseudo-élément ::after avec le contenu 'foo' pour afficher 'bar' :

$('span').find(':after').text('bar');

Solution JavaScript Vanilla

Dans Vanilla JavaScript, vous pouvez manipuler des pseudo-éléments en utilisant la méthode window.getComputedStyle() et le ::after ou ::avant le sélecteur ajouté à la propriété de style de l'élément.

Par exemple, pour obtenir le même résultat que l'exemple jQuery ci-dessus :

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

Approche alternative utilisant les attributs de données

Une approche alternative consiste à utiliser des attributs de données pour stocker le contenu souhaité, puis à utiliser jQuery pour le modifier. dynamiquement.

Par exemple, ajoutez un attribut data à l'élément span :

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

Ensuite, dans jQuery, définissez l'attr() du pseudo-élément pour manipuler son contenu :

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

En CSS, définissez le pseudo-élément avec son contenu issu de l'attribut data :

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

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!