Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la façon d'obtenir des attributs de pseudo-élément (Pseudo-Element) à l'aide de JavaScript

coldplay.xixi
Libérer: 2020-06-20 16:55:50
avant
3428 Les gens l'ont consulté

Explication détaillée de la façon d'obtenir des attributs de pseudo-élément (Pseudo-Element) à l'aide de JavaScript

Les pseudo-éléments CSS sont très utiles - vous pouvez les utiliser pour créer des triangles CSS, les utiliser sur des boîtes d'invite, et vous pouvez également les utiliser pour effectuer de nombreuses tâches simples sans en avoir besoin. pour les éléments HTML redondants. 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 :

.element:before {
	content: 'NEW';
	color: rgb(255, 0, 0);
}
Copier après la connexion

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

var color = window.getComputedStyle(
	document.querySelector('.element'), ':before'
).getPropertyValue('color')
Copier après la connexion

Placez le pseudo-élément comme window.getComputedStyle méthode Dans le deuxième paramètre, vous pouvez obtenir les attributs dans le style 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 !

Tutoriel recommandé : "Tutoriel de base Javascript"

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!

Étiquettes associées:
source:webhek.com
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal