Natives Javascript erhält elementare style_javascript-Kenntnisse

Zusammenfassung:
Während des Entwicklungsprozesses stoßen wir häufig auf das Erhalten oder Ändern des Stils von DOM-Elementen über js. Es gibt viele Methoden, beispielsweise das Ändern der Klasse von DOM-Elementen. Jetzt besprechen wir native js, um den CSS-Stil von DOM-Elementen zu erhalten. Beachten Sie, dass es sich um das Abrufen und nicht um das Festlegen von

handelt

Bevor wir beginnen, sprechen wir über die Bedeutung des Abrufens aller CSS-Attributobjekte, die schließlich auf das Element angewendet werden. Wenn für das Element kein Stil festgelegt ist, wird auch der Standardstil des Browsers zurückgegeben.

1.ele.style
Als ich DOM lernte, sah ich, dass der Elementstilwert über ele.style abgerufen wurde, aber manchmal war das, was erhalten wurde, nicht der Stilwert des Knotens, sondern ein Nullwert. Dies liegt daran, dass ele.style nur den im Style-Attribut im Element-Tag geschriebenen Stilwert abrufen kann, nicht jedoch den in und über Geladene Stilattribute

Beispiel:

Code kopieren Der Code lautet wie folgt:

         var test = document.getElementById("test");
//Erhalte die Farbe des Knotens
         test.style.color;

2. getComputedStyle()
GetComputedStyle ist eine Methode, die alle endgültigen CSS-Attributwerte des aktuellen Elements abrufen kann.

Die Syntax lautet wie folgt:

window.getComputedStyle("Element", "Pseudo-class");

Diese Methode akzeptiert zwei Parameter: das Element, um den berechneten Stil zu erhalten, und eine Pseudoelementzeichenfolge (z. B. „:before“). Wenn keine Pseudoelementinformationen erforderlich sind, kann der zweite Parameter null sein. Sie können auch document.defaultView.getComputedStyle("Element", "Pseudo-class");

verwenden

Beispiel:

Code kopieren Der Code lautet wie folgt:

         var test = document.getElementById("test"),
          demo = window.getComputedStyle(test, null); //Erhalte die Farbe des Knotens
demo.color

Hinweis: Firefox und Safari konvertieren die Farbe in das RGB-Format. Wenn auf dem Testknoten kein Stil vorhanden ist, verwenden Sie style.length, um die Anzahl der Browser-Standardstile zu überprüfen. IE6-8 unterstützt diese Methode nicht, Sie müssen die folgende Methode verwenden

3. ele.currentStyle currentStyle ist ein Attribut des IE-Browsers selbst. Seine Syntax ähnelt ele.style. Der Unterschied besteht darin, dass element.currentStyle den endgültigen CSS-Attributwert zurückgibt, der aktuell auf das Element angewendet wird (einschließlich externer Link-CSS-Dateien und des eingebetteten