JavaScript -Methode, um CSS -Attributwert zu erhalten: GetComputedstyle und CurrentStyle
1. Für den Inline -CSS -Stil des Elements (<div style = "color:#369"> Hallo </div>) können Sie Element.Style.Color direkt verwenden, um den Wert des CSS -Attributs direkt zu erhalten.
2. Es ist jedoch unmöglich, die extern definierten CSS -Stile zu erhalten. Darüber hinaus unterscheiden sich die vom IE -Browser verwendeten Methoden von anderen Standard -Browsern (Firefox, Chrom, Oper, Safari). IE Browser verwendet Element.currentStyle und W3C Standard Browser verwendet GetComputedstyle, um zu erhalten.
1. IE erhält den CSS -Attributwert extern im Element: Element.CurrentStyle
Das CurrentStyle -Objekt gibt das Stylesheet im Element zurück, aber das Style -Objekt gibt nur den eingebetteten Stil zurück, der auf das Element über das Style -Tag -Attribut angewendet wird.
Daher kann der Stilwert, der durch das CurrentStyle -Objekt erhalten wird, von dem durch das Stilobjekt erhaltenen Stilwert unterscheiden.
Wenn beispielsweise der Farbeigenschaftswert des Absatzes über einen Link oder ein Emetten -Stylesheet statt eingebettet auf rot (rot) eingestellt ist, gibt das Objekt. Wenn der Benutzer jedoch <p style = "color: 'rot'"> angibt, gibt sowohl CurrentStyle als auch Style -Objekte den Wert rot zurück.
Das CurrentStyle -Objekt spiegelt die Stilpriorität im Stilblatt wider. In HTML lautet diese Bestellung:
1) Inline -Stil
2) Stylesheet -Regeln
3) HTML -Tag -Attribute
4) Interne Definition von HTML -Tags
2. W3C erhält den CSS -Attributwert extern definiert: Window.GetComputedStyle (Element, Pseudoelt)
Element erforderlich, HTML -Element
Pseudoelt ist erforderlich, um den Stil des Pseudoklasse des Elements zu erhalten
Die Codekopie lautet wie folgt:
Funktion getStyle (Knoten, Eigenschaft) {
if (node.style [Eigenschaft]) {
Return Node.Style [Eigenschaft];
}
sonst if (node.currentStyle) {
return node.currentStyle [Eigentum];
}
sonst if (document.defaultView && document.defaultView.getComputedStyle) {
var style = document.defaultView.getComputedStyle (Knoten, NULL);
return style.getPropertyValue (Eigenschaft);
}
null zurückkehren;
}