Um Anfragen in der Zukunft zu erleichtern, habe ich einige Informationen gelesen und die folgenden Methoden zusammengefasst. Es ist nur auf einheimische JS beschränkt. Wenn es einen falschen Ort gibt, weisen Sie bitte darauf hin! Ich hoffe nur, dass nach dem Lesen allen in Ordnung ist!
1. Sie können den CSS -Stil von Dokumentelementen über das Stilobjekt des DOM -Knoten -Objekts (d. H. Das CSSstyledeClaration -Objekt) lesen und schreiben).
Zum Beispiel: var elm = document.getElementById ('Test');
elm.style.color = 'schwarz';
2. Lesen und schreiben Sie Style -Attribute direkt über getAtTribute (), setAttribute () und removeAttribute () des Elementobjekts
Zum Beispiel: Elm.Setattribute ('Stil', 'Farbe: Rot; Linienhöhe: 30px');
3. Durch die CSSTEXT -Eigenschaft des CSSstyledeClaration -Objekts, SetProperty (), Remeproperty und andere Methoden
wie:
Elm.style.csSTEXT = 'Farbe: Rot; Linienhöhe: 30px'; Elm.style.removeProperty ('Color'); Elm.style.setProperty ('Color', 'Green', 'wichtig'); Elm.style.csStext = ''; // Entfernen Sie schnell alle Erklärungen dieser RegelDer Stil der Stilerklärung der einzelnen CSS -Regel (das Teil der Klammern) ist ein CSSstyledeClaration -Objekt, seine Eigenschaften und Methoden:
Eigentum:
1.CSSTEXT: Alle Stilerklärungstext der aktuellen Regel. Diese Eigenschaft kann gelesen und geschrieben und verwendet werden, um die aktuelle Regel festzulegen.
2.Length: Wie viele Deklarationen enthält die aktuelle Regel?
3.PARENTRURE: Die Regel, die die aktuelle Regel enthält, die Parentrule -Eigenschaft derselben CSSrule -Schnittstelle.
Verfahren:
1. Die Methode von GetPropertriority () gibt die angegebene Priorität zurück. Wenn ja, ist es "wichtig", sonst ist es eine leere Zeichenfolge;
2. Die GetPropertyValue -Methode gibt den angegebenen deklarierten Wert zurück;
3. Die Methode der Element (Index) gibt den Attributnamen der angegebenen Position zurück und wird im Allgemeinen direkter unter Verwendung der [Index] -Syntax;
V.
5.SetProperty -Methode wird verwendet, um das angegebene CSS -Attribut festzulegen, und es gibt keinen Rückgabewert.
V. Es ist ein schreibgeschütztes Klassenarray-Objekt, und sein Element ist ein CsStylesheet-Objekt (vom Stylesheet-Objekt geerbt). Die Eigenschaftsmethoden dieses Objekts sind wie folgt:
Eigentum:
1. CSSRULES -Klassenarray -Objekt, die Elemente sind CSS -Regeln CSstylerule -Objekte im Stilblatt; IE9 sind die folgenden Regeln;
2. Das deaktivierte Attribut wird verwendet, um ein Stylesheet mit einem Wert von True oder Deaktiviert zu öffnen oder zu schließen.
3. Die Eigenschaft OwnoDode gibt den DOM -Knoten zurück, in dem sich das Stylesheet -Objekt befindet, normalerweise <Link> oder <style>. Für diese Stylesheets, auf die andere Stylesheets verwiesen werden, ist diese Eigenschaft NULL.
4. Da der Befehl @import von CSS es anderen Stilblättern ermöglicht, in das Stylesheet geladen zu werden, verfügt die ParentStylheet -Eigenschaft über die ParentStylesheet -Eigenschaft, die das Stylesheet zurückgibt, das das aktuelle Stylesheet enthält. Wenn das aktuelle Stylesheet ein Stylesheet auf höchstem Niveau ist, gibt die Eigenschaft NULL zurück.
5. Das Typ -Attribut gibt den Typwert des Stylesheet -Objekts zurück, normalerweise Text/CSS.
6. Das Titelattribut gibt den Titelwert des Stylesheet -Objekts zurück.
7. Das HREF-Attribut ist ein schreibgeschütztes Attribut, das die Stylesheet-Adresse der Stylesheet-Objektverbindung zurückgibt. Bei eingebetteten Style -Knoten entspricht diese Eigenschaft NULL;
8. Das Medienattribut gibt an, ob dieses Stilblatt für Bildschirm, Druck verwendet wird oder beides anwendbar ist (alle). Dieses Attribut ist schreibgeschützt und der Standardwert ist Bildschirm.
Methode: Deleterule () löscht eine Regel aus dem Stilblatt, Insertrule () fügt eine neue Regel in das Stylesheet ein, und IE9 wird hinzugefügt, und Removerule ();
wie:
document.Stylesheets [0] .Insertrule ('#test: hover {color: white;}', 0); document.Stylesheets [0] .Deleterule (0); // Die erste Regel im Style Sheet -Dokument löschen. // Rückgabe des Selektor -String -Dokuments. // Die Regelzeichenfolge zurückgibt, einschließlich des Selektordokuments. // Geben Sie alle Style -Deklaration -Zeichenfolgen für die aktuelle Regel zurück5. Verwenden Sie die GetComputedStyle -Methode des Fensterobjekts. Der erste Parameter ist das Elementobjekt, und der zweite Parameter kann null, leerer Zeichenfolge oder Pseudo-Element-Zeichenfolge sein. Diese Methode gibt ein schreibgeschütztes CSstyledeClaration-Objekt zurück, das den Berechnungsstil darstellt. Es repräsentiert die endgültigen Stilinformationen, die tatsächlich auf das angegebene Element angewendet werden, dh das Ergebnis nach der Überlagerung verschiedener CSS -Regeln;
Zum Beispiel: var color = window.getComputedStyle (Elm, ': vor'). Farbe;
var color = window.getComputedStyle (ELM, ': vor'). getPropertyValue ('color');
Oder: var color = window.getComputedStyle (ELM, NULL) .Color;
Der Unterschied zwischen einem CSSstyledeClaration -Objekt, das einen berechneten Stil darstellt, und einem CSSstyledeClaration -Objekt, das einen Inline -Stil darstellt:
1. Die Eigenschaften des Berechnungsstils sind schreibgeschützt;
2. Berechnen Sie den Wert des Stils ist ein absoluter Wert. Relative Einheiten wie Prozentsätze und Punkte werden alle in die Absolutwerte der String umgewandelt, die 'PX' saugen. Das Attribut, dessen Wert die Farbe ist, wird im Format "RGB (#,#,#)" oder "RGBA (#,#,#,#)" zurückgegeben;
3. Berechnen Sie keine zusammengesetzten Attribute, sondern nur basierend auf den grundlegendsten Attributen, wie z.
4. Die CSSTEXT -Eigenschaft ist nicht im Stilobjekt definiert.
5. Der Berechnungsstil täuscht ebenfalls. Bei der Verwendung müssen Sie beim Abfragen bestimmter Attribute auf den Rückgabewert achten. Zum Beispiel eine Schriftfamilie abfragen;
6. Die GetComputedStyle -Methode wird unten nicht unterstützt. IE9. Das Elementobjekt von IE hat das aktuelle Stilsattribut;
6. Stylesblatt direkt hinzufügen
1. Erstellen Sie ein Tag <style>, um ein integriertes Stilblatt hinzuzufügen
var style1 = document.createelement ('style'); style1.innerHtml = 'body {color: rot} #top: hover {background-color: rot; Farbe: weiß;}'; document.head.appendchild (style1);2. Eine andere Möglichkeit besteht darin, ein externes Stylesheet hinzuzufügen, dh einen Linkknoten im Dokument hinzuzufügen und das HREF
var link1 = document.createelement ('link'); link1.setAttribute ('rel', 'stylesheet'); link1.setAttribute ('type', 'text/cs');7. Das Fenster.Matchmedia -Methode wird verwendet, um die Mediquery -Erklärung von CSS zu überprüfen. Die neuesten Versionen verschiedener Browser (einschließlich IE 10+) unterstützen diese Methode. Bei alten Browsern, die diese Methode nicht unterstützen, können Sie die Drittanbieter-Funktionsbibliothek matchMedia.js verwenden.
Hier ist ein Beispiel für die Mediquery -Erklärung:
@Media All und (Max-Device-Width: 700px) {Body {Hintergrund: #ff0;}}Die Methode von window.MatchMedia akzeptiert eine Mediquery -Anweisung -Zeichenfolge als Parameter und gibt ein Mediaquerylist -Objekt zurück. Dieses Objekt hat die folgenden zwei Eigenschaften:
Medien: Gibt die Anweisung für Abfrage Mediaquery zurück.
Übereinstimmungen: Gibt einen booleschen Wert zurück, der angibt, ob die aktuelle Umgebung mit der Abfrageanweisung übereinstimmt.
var result = window.matchmedia ('(max-width: 700px)'); if (result.matches) {console.log ('Seitenbreite ist weniger oder gleich 700px'); } else {console.log ('Seitenbreite ist größer als 700px'); }Das von der Windows.MatchMedia -Methode zurückgegebene MediaqueryList -Objekt verfügt über zwei Methoden zum Hören auf Ereignisse: die addListener -Methode und die Removelistener -Methode. Wenn sich das Ergebnis der Mediquery -Abfrage ändert, wird die angegebene Rückruffunktion aufgerufen.
var mql = window.matchmedia ("(max-width: 700px)"); MQL.AddListener (mqcallback); // Rufen Sie die Rückruffunktion MQCallback (mqcallback) an.Verweise auf diesen Artikel:
MDN: https://developer.mozilla.org/zh-cn/docs/web/api
Ruan Yifeng JavaScript Referenz: http://javascript.ruanyifeng.com/dom/cs.html
Autoritative JavaScript -Handbuch Sechste Ausgabe
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.