Les pseudo-éléments CSS sont très puissants et sont souvent utilisés pour créer des indices du triangle CSS. L'utilisation de pseudo-éléments CSS peut obtenir des effets simples sans avoir besoin d'ajouter des balises HTML supplémentaires. Une chose est que JavaScript ne peut pas obtenir ces valeurs d'attribut CSS, mais il y a maintenant un moyen d'obtenir:
Jetez un œil au code CSS suivant:
.Element: avant {Content: 'New'; Couleur: RGB (255, 0, 0);}. Élément: Avant {Content: 'New'; Color: RGB (255, 0, 0);}Afin d'obtenir l'attribut de couleur de .Element: avant, vous pouvez utiliser le code suivant:
var color = window.getCompuledStyle (document.QuerySelector ('. élément'), ': avant'). getPropertyValue ('Color') var color = window.getCompupedStyle (document.QuerySelector ('. élément'), ': avant'). GetPropertyValue ('Color')Passez le pseudo-élément comme deuxième paramètre à la méthode Window.getcomputedStyle pour obtenir son attribut CSS. Mettez ce code dans votre ensemble de fonctions d'outil. Cette méthode sera utile car les pseudo-éléments sont pris en charge par de plus en plus de navigateurs.
Remarque du traducteur: La méthode Window.getCompuledStyle n'est pas prise en charge dans les navigateurs ci-dessous, IE9, et GetPropertyValue doit être utilisé avec la méthode GetCompuledStyle. IE prend en charge l'attribut CurrentStyle, mais il ne peut toujours pas obtenir les propriétés du pseudo-élément.
Méthode pour obtenir avec précision la valeur de l'attribut CSS de l'élément spécifié.
<script type = "text / javascript"> function getStyle (elem, name) {// Si la propriété existe dans le style [], il a été récemment défini (et est le actuel) if (elem.style [name]) {return elem.style [name]; } // sinon, essayez ie else if (elem.currentStyle) {return elem.currentStyle [name]; } // ou la méthode W3C, s'il existe autrement if (document.defaultView && document.defaultView.getComputedStyle) {// Il utilise la méthode d'écriture régulière de style "Text-Align", plutôt que "textalign" = name.replace (/ ([az]) / g, "- $"); name = name.tolowercase (); // Obtenez l'objet de style et obtenez la valeur de la propriété (si elle existe) var s = document.defaultView.getCompupedStyle (elem, ""); return s && s.getPropertyValue (name); // sinon, il utilise un autre navigateur} else {return null; }} </ script>