JavaScript et jQuery peuvent-ils manipuler des pseudo-éléments CSS comme ::before et ::after ?

Sélection et manipulation de pseudo-éléments CSS à l'aide de JavaScript et de jQuery

Les pseudo-éléments CSS comme ::before et ::after (tous deux anciennes et nouvelles versions) être sélectionnées et manipulées à l'aide de jQuery ?

Utilisation Méthode .css() de jQuery

En supposant la règle CSS suivante dans la feuille de style :

.span::after { content: 'foo'; }

Pour changer 'foo' en 'bar' à l'aide de JavaScript Vanilla ou jQuery, vous pouvez utilisez la méthode .css().

Vanille JavaScript :

const element = document.querySelector('.span');
element.style.content = 'bar';

jQuery :

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

Utilisation des attributs de données

Une autre méthode consiste à transmettre le contenu du pseudo-élément en utilisant un attribut de données et en le manipulant avec jQuery.

En HTML :

<span>foo</span>

En jQuery :

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

En CSS :

span:after {
  content: attr(data-content) ' any other text you may want';
}

Pour éviter que le texte supplémentaire n'apparaisse, la solution de seucolega peut être combiné avec cette approche.

En HTML :

<span>foo</span>

En jQuery :

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

En CSS :

span.change:after {
  content: attr(data-content) ' any other text you may want';
}

Ces méthodes offrent une flexibilité dans la sélection et la modification du contenu de Pseudo-éléments CSS utilisant JavaScript ou jQuery.

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!