Detaillierte Erläuterung der Methode zum Lesen und Schreiben von CSS-Stilen in nativem Javascript

Ich bin kürzlich während des Studiums auf dieses Problem gestoßen. Um zukünftige Anfragen zu erleichtern, habe ich einige Informationen überprüft und die folgenden Methoden zusammengefasst. Wenn etwas nicht stimmt, weisen Sie es bitte darauf hin. Ich hoffe nur, dass jeder nach der Lektüre das Gefühl hat, etwas gelernt zu haben! Im folgenden Artikel wird hauptsächlich die Methode zur Verwendung von nativem Javascript zum Lesen und Schreiben von CSS-Stilen vorgestellt. Freunde in Not können sich darauf beziehen.

Vorwort

Wenn Sie über die Bedienung von CSS-Stilen sprechen, denken viele Leute vielleicht an die CSS-Methode von jQuery: $(selector).css(name) , aber es gibt sie Einige Gedanken: Haben Sie jemals darüber nachgedacht, wie Sie native JS verwenden können, um ähnliche Funktionen zu erreichen?

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).

Durch Suchen und Organisieren habe ich die Implementierung des Lesens und Schreibens von CSS-Stilen mit nativem JS zusammengefasst. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf die ausführliche Einführung.

Stil bekommen

1. Dom-Stil

Diese Methode Es können nur Inline-Stile abgerufen werden:

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

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

2. currentStyle

Diese Methode ist nur auf IE-Browser anwendbar. Sie ähnelt in der Form element.style. Der Unterschied besteht darin, dass sie genau wie der Name von currentStyle (der Stil nach dem Laden von CSS) das aktuelle endgültige CSS zurückgibt Attributwert des Elements. Einschließlich Stile in internen Stil-Tags und extern importierten CSS-Dateien.

Verwendung: element.currentStyle.attribute

Zum Beispiel möchten wir die Breite der Box mit der ID erhalten:

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

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

3. getComputedStyle

getComputedStyle ist eine Methode, die alle endgültig verwendeten CSS-Eigenschaftswerte von abrufen kann das aktuelle Element. 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.

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

um eine allgemeine Funktion zu kapseln, um den Stil

zu erhalten, damit er anwendbar ist an alle Für die wichtigsten Mainstream-Browser schreiben wir eine Funktion:

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

function getStyle(el, styleName) {

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

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

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

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

Diese Funktion berücksichtigt keine verwandten Operationen an Pseudoklassen und kann nach Bedarf erweitert werden~

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, element.style kann jedoch sowohl lesen als auch schreiben.

Der erhaltene Objektbereich

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.

Zitiert aus Zhang >

Unnötig zu erwähnen, dass Sie beispielsweise die Hintergrundfarbe des Elements in Rot ändern:

2. cssText-Attribut

Der Kern von cssText besteht darin, den Stilattributwert des HTML-Elements 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 den Elementselektor des Attributs und Werts entfernt wurden.

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

Seine Verwendung ähnelt innerHTML:

Ausführlichere Erklärungen, wie natives Javascript Lese- und Schreib-CSS-Stile implementiert, finden Sie auf der chinesischen PHP-Website für verwandte Artikel!