Javascript Holen Sie sich Elementstil-Nirvana_Javascript-Kenntnisse-js-Tutorial-php.cn

Javascript Holen Sie sich Elementstil-Nirvana_Javascript-Kenntnisse

WBOY

Freigeben： 2016-05-16 16:50:11

Original

1089 Leute haben es durchsucht

Javascript-Methoden zum Abrufen von CSS-Attributwerten: getComputedStyle und currentStyle

1 Für den Inline-CSS-Stil des Elements (

hello

) Sie können element.style.color direkt verwenden, um den Wert des CSS-Attributs direkt abzurufen.

2 Mit dieser Methode können jedoch keine extern definierten CSS-Stile abgerufen werden, und IE und andere Standardbrowser (Firefox, Chrome, Opera, Safari verwenden unterschiedliche Methoden. Der IE-Browser verwendet element.currentStyle und der W3C-Standardbrowser verwendet getComputedStyle, um ihn abzurufen.

1. IE erhält den Wert des außerhalb des Elements definierten CSS-Attributs: element.currentStyle

Das currentStyle-Objekt gibt das Stylesheet für das Element zurück, aber das Style-Objekt gibt nur das Stylesheet zurück Wird über das Style-Tag-Attribut auf das Element angewendet.

Daher kann sich der über das currentStyle-Objekt erhaltene Stilwert von dem über das Stilobjekt erhaltenen Stilwert unterscheiden.

Wenn beispielsweise der Farbattributwert eines Absatzes über ein verknüpftes oder eingebettetes Stylesheet und nicht über Inline auf Rot ( red ) gesetzt wird, gibt das Objekt .currentStyle.color die richtige Farbe zurück, während das Objekt style.color gibt keinen Rückgabewert zurück. Wenn der Benutzer jedoch

angibt, geben sowohl currentStyle- als auch STYLE-Objekte den Wert red zurück.
Das currentStyle-Objekt spiegelt die Stilpriorität im Stylesheet wider. In HTML ist diese Reihenfolge:

1) Inline-Stile

2) Stylesheet-Regeln

3) HTML-Tag-Attribute

4) HTML-Tags Die interne Definition von

2. W3C ruft den extern durch das Element definierten CSS-Attributwert ab: window.getComputedStyle(element, pseudoElt)
element ist erforderlich, HTML-Element
pseudoElt ist erforderlich und ruft den pseudoElt von ab das Element. Klassenstil

Code kopieren Der Code lautet wie folgt:

 
function getStyle(node , Eigenschaft){ 
if (node.style[property]) { 
return node.style[property]; 
} 
else if (node.currentStyle) { 
return node.currentStyle [property]; 
} 
else if (document.defaultView && document.defaultView.getComputedStyle) { 
var style = document.defaultView.getComputedStyle(node, null); Eigenschaft); 
 } 
return null 
} 