Méthodes et techniques JavaScript pour obtenir des attributs de pseudo-élément (Pseudo-Élément)_techniques javascript

Les pseudo-éléments CSS sont très utiles : vous pouvez les utiliser pour créer des triangles CSS, les utiliser dans des info-bulles, et vous pouvez également les utiliser pour effectuer de nombreuses tâches simples sans avoir besoin d'éléments HTML supplémentaires. Auparavant, les propriétés CSS des pseudo-éléments n'étaient pas accessibles avec JavaScript, mais désormais, il existe une nouvelle méthode JavaScript pour y accéder ! Supposons que votre code CSS ressemble à ceci :

Copier le code Le code est le suivant :

.element : avant {
contenu : 'NOUVEAU' ;
couleur : rvb(255, 0, 0);
>

Pour obtenir les attributs de style dans .element:before, vous pouvez utiliser le code JavaScript suivant :

Copier le code Le code est le suivant :

var couleur = window.getComputedStyle(
document.querySelector('.element'), ':before'
).getPropertyValue('couleur')

En utilisant le pseudo-élément comme deuxième paramètre de la méthode window.getComputedStyle, vous pouvez obtenir les attributs dans le style du pseudo-élément ! Mettez cette astuce dans votre base de connaissances, et à mesure que les navigateurs évoluent, les pseudo-éléments deviendront de plus en plus utiles !