JS verwendet die Methode getComputedStyle(), um Tipps zum CSS-Attribut „values_javascript' zu erhalten

Beim Debuggen von Webseiten wird js häufig verwendet, um den CSS-Stil von Elementen zu erhalten. Jetzt fasse ich die Methoden, die ich häufig verwende, wie folgt zusammen:

1 Die Methode besteht darin, dass JS nur den Wert abrufen kann, der in das im HTML-Tag geschriebene Stilattribut (style="...") geschrieben ist, aber nicht das in definierte Attribut abrufen kann.

Code kopieren Der Code lautet wie folgt: „Content-Type“ content=“text/html; > .ss{color:#cdcdcd;} –> ;body&gt ; ) ;//Blank

2 .currentStyle-Methode, während FF die getComputedStyle-Methode

„DOM2-Level-Stil“ verwendet, erweitert document.defaultView und stellt die getComputedStyle()-Methode bereit. Diese Methode akzeptiert zwei Parameter: das Element, von dem der berechnete Stil abgerufen werden soll, und eine Pseudoelementzeichenfolge (z. B. „:after“). Wenn keine Pseudoelementinformationen erforderlich sind, kann der zweite Parameter null sein. Die Methode getComputerStyle() gibt ein CSSStyleDeclaration-Objekt zurück, das alle berechneten Stile für das aktuelle Element enthält. Nehmen Sie die folgende HTML-Seite als Beispiel:

Code kopieren

Der Code lautet wie folgt: style /style> var myDiv = document.getElementById("myDiv"); var crushedStyle = document.defaultView.getComputedStyle(myDiv, null); alert(computedStyle.backgroundColor); //"red" Alert(computedStyle .width); //"100px" alert(computedStyle.height); //"200px" alert(computedStyle.border); //In einigen Browsern ist es „1px solid black“ Gibt die tatsächliche Rahmenregel im Stylesheet zurück (Opera gibt sie zurück, andere Browser jedoch nicht). Der Grund für diesen Unterschied liegt darin, dass verschiedene Browser umfassende Eigenschaften unterschiedlich interpretieren, da das Festlegen dieser Eigenschaft tatsächlich viele andere Eigenschaften betrifft. Beim Festlegen des Rahmens legen Sie tatsächlich die Rahmenbreite, die Farbe und die Stilattribute der vier Seiten fest. Obwohl „computedStyle.border“ nicht in allen Browsern einen Wert zurückgibt, ist dies bei „computedStyle.borderLeftWidth“ der Fall.

Es ist zu beachten, dass die Darstellung des Werts unterschiedlich sein kann, auch wenn einige Browser diese Funktion unterstützen. Beispielsweise geben Firefox und Safari alle Farben in das RGB-Format konvertiert zurück. Selbst wenn die Methode getComputedStyle() verwendet wird, ist es daher am besten, sie in mehreren Browsern zu testen.

IE unterstützt die getComputedStyle()-Methode nicht, hat aber ein ähnliches Konzept. Im IE hat jedes Element mit einem style-Attribut auch ein currentStyle-Attribut. Diese Eigenschaft ist eine Instanz von CSSStyleDeclaration und enthält alle berechneten Stile des aktuellen Elements. Die Methoden zum Erhalten dieser Stile sind ähnlich wie folgt:

Kopieren Sie den Code

Der Code lautet wie folgt: var myDiv = document.getElementById("myDiv"); var crushedStyle = myDiv.currentStyle; 🎜>alert(computedStyle.backgroundColor); //"red" alert(computedStyle.width); //"100px" alert(computedStyle.height); //"200px" alert(computedStyle .border); //undefiniert

Wie die DOM-Version gibt IE den Rahmenstil nicht zurück, da es sich um ein umfassendes Attribut handelt.

3. Eine einfache Funktion, die ich beim Schreiben eines Testfalls geschrieben habe (gilt für Chrome):

Code kopieren Der Code lautet wie folgt: function getCSS(div){ return document.defaultView . getComputedStyle(div, null); //return div.currentStyle;//Nicht verwendet, IE }

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

JS verwendet die Methode getComputedStyle(), um Tipps zum CSS-Attribut „values_javascript' zu erhalten