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

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

coldplay.xixi
coldplay.xixiavant
2020-06-20 16:55:503461parcourir

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);
}

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')

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!

Déclaration:
Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer