Zusammenfassung von Methodenbeispielen zum Abrufen verschiedener CSS-Stilattribute in nativem Javascript

Die bekannteste Methode zum Bearbeiten von Stilen in nativen JS ist das Style-Objekt im DOM. Diese Methode kann jedoch nur Inline-Stile in HTML-Dokumenten abrufen und ändern und keine Nicht-Inline-Stile (interne Stile usw.) bedienen externe Stylesheets).

Holen Sie sich Stil

1. Dom-Stil

Diese Methode kann nur Inline-Stile abrufen:

var text = document.getElementById('text');
var textColor = text.style.color;

// 得到textColor的值为 '#000'

2. Diese Methode funktioniert nur in Der IE-Browser ähnelt in seiner Form dem . Der Unterschied besteht darin, dass currentStyle genau wie sein Name der aktuelle Stil ist (der Stil, der nach dem Laden von CSS zurückgegeben wird, ist der aktuelle endgültige CSS-Attributwert des Elements). einschließlich des internen Style-Tags und extern importierter CSS-Dateien.

Verwendung: element.currentStyle.attribute

element.styleZum Beispiel möchten wir die Breite der Box mit der ID erhalten:

3. getComputedStyle

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'

getComputedStyle ist eine Methode, die alle endgültigen CSS-Eigenschaftswerte des aktuellen Elements abrufen kann. Was zurückgegeben wird, ist ein CSS-Stildeklarationsobjekt ([object CSSStyleDeclaration]) und ist schreibgeschützt.
In Bezug auf die Kompatibilität unterstützt es grundsätzlich: Chrome, Firfox, IE9, Opera, Safari

Verwendung: getComputedStyle (Element, Pseudoklasse-Attribut, wenn der zweite Parameter kein ist). Pseudoklasse Setzen Sie es auf null.

Kommen Sie und kapseln Sie eine allgemeine Funktion zum Abrufen von Stilen

var el = document.getElementById("box");
var style = window.getComputedStyle(el , ":after");

Um auf die wichtigsten Mainstream-Browser anwendbar zu sein, schreiben wir eine Funktion :

Rufen Sie dann diese Funktion auf, um die Breite der Box zu ermitteln:

// 这个函数需要传递两个参数：元素对象和样式属性名称

function getStyle(el, styleName) {

 if( el.currentStyle ) {
 
 // for IE
 return el.currentStyle[styleName];
 
 } else {
 
 // for peace
 return getComputedStyle(el, false)[styleName];
 }
 
}

This Funktion Berücksichtigt keine verwandten Operationen an Pseudoklassen. Sie können sie nach Bedarf erweitern.

var box = document.getElementById("box");

var boxWidth = getStyle(box, 'width');

Was ist der Unterschied zwischen getComputedStyle und style?

Da beide den Wert des Stilattributs erhalten, was ist der Unterschied zwischen ihnen:

Schreibgeschützt und beschreibbar

Die

getComputedStyle-Methode ist schreibgeschützt und kann den Stil nur abrufen, aber nicht festlegen, kann jedoch sowohl lesen als auch schreiben.

Der erhaltene Objektbereichelement.style

Die getComputedStyle-Methode ruft alle CSS-Attributobjekte ab, die letztendlich auf das Element angewendet werden (auch wenn kein CSS-Code vorhanden ist, der Standardvorfahre acht). Generationen werden angezeigt); und element.style kann den CSS-Stil nur im Stilattribut des Elements abrufen. Daher ist für ein bloßes Element

der Längenattributwert (falls vorhanden), der von der getComputedStyle-Methode im Objekt zurückgegeben wird, 190+ (laut meinen Tests, FF: 192, IE9: 195, Chrome: 253, die Ergebnisse). kann in verschiedenen Umgebungen unterschiedlich sein) Und element.style ist 0.

Stil festlegen

1. Dom-Stil

Das ist nicht notwendig Lassen Sie uns beispielsweise darüber sprechen, wie Sie die Hintergrundfarbe des Elements in Rot ändern:

2. cssText-Attribut

var el = document.getElementById('box');
el.style.backgroundColor = 'red';

Die Essenz von cssText besteht darin, den Stilattributwert von HTML-Elementen festzulegen. Es handelt sich um eine Textdarstellung einer Reihe von Stileigenschaften und ihrer Werte. Dieser Text ist als CSS-Stylesheet formatiert, wobei die geschweiften Klammern um die Attribut- und Wertelementselektoren entfernt wurden.
Die Verwendung ähnelt innerHTML:

Das obige ist der detaillierte Inhalt vonZusammenfassung von Methodenbeispielen zum Abrufen verschiedener CSS-Stilattribute in nativem Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!