CSS-Pseudoelemente sind sehr leistungsfähig und werden häufig verwendet, um CSS-Dreiecks-Hinweise zu erzeugen. Die Verwendung von CSS-Pseudo-Elementen kann einige einfache Effekte erzielen, ohne dass zusätzliche HTML-Tags hinzugefügt werden müssen. Eines ist, dass JavaScript diese CSS -Attributwerte nicht erhalten kann, aber jetzt gibt es eine Möglichkeit zu bekommen:
Schauen Sie sich den folgenden CSS -Code an:
.Element: vor {content: 'neu'; Farbe: RGB (255, 0, 0);}. Element: Vor {Inhalt: 'Neu'; Farbe: RGB (255, 0, 0);}Um das Farbattribut von .Element: zuvor zu erhalten, können Sie den folgenden Code verwenden:
var color = window.getComputedStyle (document.querySelector ('. Element'), ': vor').Geben Sie die Pseudoelement als zweiter Parameter an das Fenster. Geben Sie diesen Code in Ihren Tool -Funktionssatz ein. Diese Methode wird nützlich sein, da Pseudoelemente immer mehr Browser unterstützt werden.
Anmerkung des Übersetzers: Die Methode für das Fenster. IE unterstützt das CurrentStyle-Attribut, aber es kann immer noch nicht die Eigenschaften des Pseudoelements erhalten.
Methode, um den Wert des CSS -Attributs des angegebenen Elements genau zu erhalten.
<script type = "text/javaScript"> Funktion getStyle (Elem, Name) {// Wenn die Eigenschaft in style [] existiert, wurde kürzlich festgelegt (und ist der aktuelle) if (Elem.Style [Name]) {return Elem.style [Name]; } // ansonsten versuchen Sie, dh sonst if (Elem.currentStyle) {return elem.currentStyle [Name]; } // oder die W3C-Methode, wenn sie anwesend ist, wenn (document.defaultView && document.defaultView.getComputedStyle) {// Es verwendet die traditionelle "text-align" -Stil reguläre Schreibmethode anstelle "textalign" name = name.Replace (/[[Az])/g,-$ 1 "); name = name.tolowerCase (); // Erhalten Sie das Style -Objekt und erhalten Sie den Wert der Eigenschaft (falls vorhanden) var return s && S.GetPropertyValue (Name); // Ansonsten wird ein anderer Browser} else {return null; }} </script>