Einführung in den Unterschied zwischen Stil, CurrentStyle, GetComputedStyle
Es gibt drei Möglichkeiten, Blätter zu stylen
Inline -Stil: Es ist im Tag geschrieben. Inline -Stil gilt nur für alle Tags.
Interne Stilblatt: Es ist in HTML geschrieben, und der interne Stil ist nur für die Webseite gültig.
Externes Stilblatt: Wenn viele Webseiten dieselben Stile verwenden müssen, die Stile in einer CSS -Datei mit .CSS als Suffix schreiben und dann auf die CSS -Datei auf jeder Webseite verweisen, die diese Stile verwenden muss. Das am häufigsten verwendete Stilattribut ist. In JavaScript kann der Wert von xxx über document.getElementById (ID) .Style.xxxx erhalten werden. Unerwartet kann dies jedoch nur den Stilwert erhalten, der durch eingebettete Methoden festgelegt wird, dh den im Style -Attribut festgelegten Wert.
Lösung: Stellen Sie den Standardstil des CurrentStyle, Runtimestyle, GetComputedStyle Style Style ein, der durch das Style Attribut angegeben werden kann!
Runtimestyle Runtime Style! Wenn es sich mit der Eigenschaft des Stils überschneidet, wird die Eigenschaft des Stils überschrieben!
CurrentStyle bezieht sich auf die Kombination von Stil und Runtimestyle! Sie können den Wert des CSS -Stils erhalten, auf das inline oder extern über CurrentStyle (dh nur) verwiesen wird. Zum Beispiel: Document.GetElementById ("Test"). CurrentStyle.top
Um mit FF kompatibel zu sein, müssen Sie GetComputedStyle benötigen, um dies zu tun
Hinweis: GetComputedStyle ist in Firefox, CurrentStyle ist in IE. Zum Beispiel
<Styles> #mydiv {width: 300px;} </style>Aber:
var mydiv = document.getElementById ('mydiv'); if (mydiv.currentStyle) {var width = mydiv.currentStyle ['width']; alert ('ie:' + width);} else if (windowsComputedstyle) {var width = fownty. null) ['width']; alert ('firefox:' + width);}Darüber hinaus können Sie es unter FF auch auf folgende Weise erhalten
document.DefaultView.getComputedStyle (mydiv, null) .width; window.getComputedStyle (mydiv, null) .width;
Hier sind einige Ergänzungen:
Beim Lesen des Blogs habe ich diese 3 Jungs gesehen - Stil, CurrentStyle, GetComputedstyle. Ich habe es noch nicht begegnet, als ich schon einmal studierte, aber jetzt habe ich es begegnet, also habe ich es ein bisschen studiert. Ich habe einige Probleme entdeckt, vielleicht lag es am Zeitalter, oder es könnte an meiner Unwissenheit liegen, aber es hat mich wirklich verwirrt. Obwohl Tao Yuanming sagte, er habe beim Studium nicht viel Verständnis gesucht, als ein Front-End-Entwickler, der ein ausgezeichnetes Front-End werden will, muss er es immer noch verstehen, sonst wird er nicht in der Lage sein, zu schlafen!
Lassen Sie uns zuerst die Grundlagen legen. Sprechen wir über die drei Formen von Kaskadenstilblättern (die drei Typen haben unterschiedliche Namen nach ihren jeweiligen Gewohnheiten):
eins. Inline -Stil: Set mit dem Style -Attribut in HTML -Tags. wie:
1 <p style = "Farbe:#f90;"> Dies ist der Inline -Stil </p> </p>
zwei. Einbettungsstil: Durch das <Kace> -Tag durch das <Styles> -Tag. wie:
<style type = "text/css">/*Dies ist der Einbettungsstil*/.stuff {color:#f90} </style>drei. Externer Stil: Set über <Link> Tag. wie:
<link rel="stylesheet" href="path/style.css" type="text/css"> ==================================================/*External Style*/ @charset "UTF-8"; .stuff {color:#f90;}Die dritte Methode wird empfohlen.
Die drei Protagonisten unten sind auf dem Feld.
Die erste Person, die langsam auf uns zukam, war Stil. Es wird in obj.style.attr verwendet; Ein Filmkritiker kommentierte in seinem Blog:
Stil kann nur den Inline -Stil des Elements erhalten, und die inneren und äußeren Stile können nicht mit dem Stil erhalten werden.
Ich habe es mit dem folgenden Code überprüft, und es ist tatsächlich wie oben erwähnt. Ich habe drei Stile verwendet und das Ergebnis, das ich erzielte, ist der Wert des Inline -Stils.
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unauftitelte Dokument </title> <link href = "style.cs. type = "text/css"/> <style type = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ('moment'); console.log (odiv.style.width); //alert(odiv.style.width); }; </script> </head> <body> <div id = "stuff"> </div> </body> </html>Externer Link Stylesheet Style.css::
1 @CharSet "UTF-8"; 2 / * CSS -Dokument * / 3 #stuff {width: 100px;}
Das Ergebnis ist 400px.
Der folgende Stil ist CurrentStyle, was eine starke MS -Unterstützung haben soll, was bedeutet, dass dieser Typ nur im IE -Browser verwendet werden kann. Andere sind nicht gut. Es wird von windows.currentStyle ["attr '] oder window.currentStyle.attr. In IE den Breitenattributwert von 300px in eingebettetem Stilblatt erhalten, das nicht in Mozilla Firefox weitergegeben werden kann.
Der letzte kommt zu GetComputedstyle, der Window.GetComputedStyle (OB, Pseudoelt) ["Attr '] oder Fenster verwendet.
Der Filmkritiker kommentierte:
GetComputedStyle funktioniert genauso wie CurrentStyle, ist jedoch für FF, Opera, Safari und Chrome geeignet.
Mit einer skeptischen Haltung habe ich sie erneut verifiziert, und IE7, IE8 und IE9 haben alle Fehler gemeldet:
Das Objekt unterstützt das Attribut oder die Methode "GetComputedStyle" nicht
Browserkompatibilitätsprobleme. Das Browserkompatibilitätsproblem ist in der Tat Kopfschmerzen für Front-End-Entwickler, insbesondere für den Täter IE6. Aber wir können keine Angst haben und uns davon fernhalten, sondern sich mit den Bewegungen befassen, und Soldaten kommen, um Wasser und Boden zu blockieren. Sie werden viel Spaß im Kampf damit und ein Gefühl der Leistung haben, nachdem Sie ihn besiegt haben! ! !
Ein weiterer Punkt: GetComputedStyle und CurrentStyle können nur Attributwerte abrufen, können jedoch keine Attribute festlegen. Wenn Sie den Attributwert festlegen möchten, verwenden Sie Ob.Style.attr.
Bitte geben Sie mir einen Rat, wenn etwas nicht stimmt. Vielen Dank im Voraus! !