Comment puis-je modifier CSS : après les pseudo-éléments à l'aide de jQuery ?

Accès au sélecteur CSS ":after" avec jQuery

Le pseudo-élément ":after" est souvent utilisé en CSS pour ajouter des éléments visuels à un élément HTML spécifique. Cependant, accéder à ce pseudo-élément avec jQuery peut être difficile car il ne fait pas directement partie du DOM.

Méthode jQuery

Le code jQuery fourni tente de modifier le largeur de bordure de l'élément ":after", mais cela ne fonctionne pas car ":after" n'est pas un sélecteur CSS valide. Au lieu de cela, jQuery peut manipuler la classe de l'élément parent et activer une classe "modifiée" supplémentaire pour accéder à l'élément ":after".

CSS et code jQuery :

.pageMenu .active.changed::after { 
    border-top-width: 22px;
    border-left-width: 22px;
}

$('.pageMenu .active').toggleClass('changed');

Ce code ajoutera une classe "changed" à l'élément de menu actif, ce qui déclenchera les règles CSS supplémentaires appliquées au pseudo-élément ":after" pour le classe "changed".

Remarque :

Bien que la solution ci-dessus fournisse une solution de contournement, il est important de se rappeler que les pseudo-éléments ":after" ne font pas techniquement partie de le DOM et ne peut pas être directement manipulé avec JavaScript. Cependant, il existe des bibliothèques et des techniques permettant de modifier indirectement les pseudo-éléments. Reportez-vous à « Manipulation des pseudo-éléments CSS à l'aide de jQuery (par exemple :before et :after) » pour plus d'informations sur ces techniques.

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!