Fallstudie zu JavaScript-Style-Objekten und CurrentStyle-Objekten

1. Stilobjekt

Das Stilobjekt stellt eine einzelne Stildeklaration dar und kann vom Dokumentelement aus aufgerufen werden, auf das der Stil angewendet wird. Das Style-Objekt erhält den Inline-Style , also den Wert des Style-Attributs im Element-Tag.

Beispiel:

<style type="text/css">#div{color:gray;}</div>//Interner Stil <div id="div" style="color:red;"></div>//Inline-Stil document.getElementById('id').style.color;//Der Wert ist rot

2. currentStyle-Objekt

Gibt den endgültigen Stil aller Stildeklarationen (einschließlich interner, externer und Inline-Deklarationen) zurück, die gemäß den CSS-Kaskadierungsregeln auf das Element angewendet wurden. Nur IE und Opera unterstützen die Verwendung von CurrentStyle, um den berechneten Stil eines Elements zu erhalten. Die Methode getComputeStyle() kann den vom aktuellen Element verwendeten CSS-Attributwert abrufen.

var div=window.getComputeStyle("div",null).color; //Der erste Parameter ist das Zielelement, der zweite Parameter ist die Pseudoklasse (erforderlich, auf null gesetzt, wenn keine Pseudoklasse vorhanden ist)

Der Unterschied zum Style-Objekt:

getComputeStyle() ist schreibgeschützt, es kann nur abgerufen, aber nicht festgelegt werden, während der Stil gelesen und festgelegt werden kann.

Für ein Element ohne festgelegten Stil gibt getComputedStyle() den Wert der Längeneigenschaft im Objekt zurück. Die Länge im Stilobjekt beträgt 0.

Verschiedene Browser unterstützen das currentStyle-Objekt unterschiedlich, daher muss auf Kompatibilität geachtet werden.

var div = document.getElementById('div');

var colorStr=null;

if(div.currentStyle){//Kompatibel mit IE

       colorStr=div.aktuellerStil;

}anders{
colorStr=window.getComputedStyle(div,null);

}

var col=colorStr.color; //Holen Sie sich den Farbattributwert von div

3. Beispiel (ziehbare Ebene)

CurrentStyle-Objekt

Stilobjekt

Dies ist das Ende dieses Artikels über die detaillierte Fallanalyse von JavaScript-Style-Objekten und CurrentStyle-Objekten. Weitere relevante Inhalte zu JS-Style-Objekten und CurrentStyle-Objekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!