Lassen Sie uns noch einmal über das dynamische Hinzufügen von Stilregeln sprechen

Ich habe in einem Blog-Beitrag eine nützliche Funktion angegeben und sie wurde in mehreren meiner Blog-Beiträge häufig verwendet. Da ich in letzter Zeit viel gelesen habe, habe ich diesen Blogbeitrag geschrieben, um die neuen Dinge, die ich gelernt habe, zu ordnen.

Es besteht kein Zweifel daran, dass der direkte Import eines neuen Stylesheets aufgrund des Prinzips der Trennung von Leistung und Struktur die beste Wahl ist. In einigen Fällen funktioniert dies jedoch nicht, wenn wir beispielsweise ein ziehbares DIV erstellen Beim Festlegen von Stilen wird es unbedingt positioniert, um zu verhindern, dass es den ursprünglichen Dokumentfluss beeinträchtigt, und dann die oberen und linken Werte nach und nach ändern, um den Bewegungseffekt zu erzielen. Da das Ziehen ein Zeitkonzept hat, nämlich 24 Bilder pro Sekunde, ist es unmöglich, alles in das Stylesheet aufzunehmen. Daher ist es sehr wichtig, Stilregeln dynamisch zu generieren und Stilregeln schnell zu ändern. In DOM2.0 wurden viele Schnittstellen erweitert.

Um einen Schritt zurückzutreten: Die Trennung von Leistung und Struktur beschränkt sich nicht nur auf den Import von Stylesheets. Sie wissen, es gibt drei Arten von Stilen: externe Stile, interne Stile und Inline-Stile.

• Externe Stile, die wir oben erwähnt haben, werden in einer separaten CSS-Datei geschrieben.
• Interne Stile werden unabhängig in einem Style-Tag geschrieben und normalerweise im Head-Tag platziert. Der von der zuletzt bereitgestellten Funktion generierte Stil ist der interne Stil.
• Inline-Stile sind Stile, die im Stilattribut des Elements geschrieben werden.

Die neu hinzugefügten Schnittstellen konzentrieren sich hauptsächlich auf externe Stile – ich sage Schnittstellen, weil die entsprechenden Implementierungen vom Browser bereitgestellt werden. Arrogante Leute wie IE6 ignorieren ihre Existenz nie.

Im W3C-Modell stellen das Link-Tag und das Style-Tag vom Typ „text/css“ beide ein CSSStyleSheet-Objekt dar. Wir können alle CSSStyleSheet-Objekte auf der aktuellen Seite über document.styleSheets abrufen, aber dies ist eine Sammlung, keine einfache. Array. Jedes CSSStyleSheet-Objekt verfügt über die folgenden Eigenschaften:

• Typ: Gibt immer die Zeichenfolge „text/css“ zurück.
• deaktiviert: Hat die gleiche Wirkung wie die Funktion „Eingabe deaktiviert“ und der Standardwert ist „false“.
• href: Gibt die URL zurück. Wenn es sich um ein Style-Tag handelt, ist es null.
• title: Gibt den Wert seines Titels zurück. Der Titel ist derselbe wie der Titel eines gewöhnlichen Elements.
• Medien: Die von IE und Firefox zurückgegebenen Dinge sind nicht konsistent, daher ist es schwer zu sagen. media wird verwendet, um anzugeben, für welche Geräte die Stilregeln, die es besitzt, gültig sind. Der Standardwert ist all.
• ownerRule: Gibt ein schreibgeschütztes CSSRule-Objekt zurück, wenn das Stylesheet mit @import eingeführt wird.
• cssRules: Gibt eine Sammlung schreibgeschützter Stilregelobjekte (CSSStyleRule-Objekte) zurück.

Das Stilregelobjekt (CSSStyleRule-Objekt) wurde vom W3C entwickelt, um den Stil detaillierter festzulegen. Beispielsweise entspricht Folgendes einem Stilregelobjekt:

Button[Typ] {
Polsterung: 4px 10px 4px 7px;
Zeilenhöhe:17px;
}

Das Stilregelobjekt verfügt über die folgenden Hauptattribute: Typ, cssText, parentStyleSheet, parentRule.

Der Typ ähnelt in gewisser Weise dem Knotentyp, der Stilregeln unterteilt. Er verwendet eine Ganzzahl, um seinen Typ darzustellen. Die konkrete Situation ist wie folgt

• 0: CSSRule.UNKNOWN_RULE
• 1: CSSRule.STYLE_RULE (ein CSSStyleRule-Objekt definieren)
• 2: CSSRule.CHARSET_RULE (definieren Sie ein CSSCharsetRule-Objekt, mit dem der Zeichensatz des aktuellen Stylesheets festgelegt wird. Der Standardwert ist derselbe wie auf der aktuellen Webseite.)
• 3: CSSRule.IMPORT_RULE (definieren Sie ein CSSImportRule-Objekt, das @import zum Einführen anderer Stylesheets verwenden soll)
• 4: CSSRule.MEDIA_RULE (definieren Sie ein CSSMediaRule-Objekt, mit dem festgelegt wird, ob dieser Stil für Monitore, Drucker, Projektoren usw. verwendet wird.)
• 5: CSSRule.FONT_FACE_RULE (definieren Sie ein CSSFontFaceRule-Objekt, CSS3s @font-face)
• 6: CSSRule.PAGE_RULE (ein CSSPageRule-Objekt definieren)

Es erübrigt sich zu erwähnen, dass cssText ein sehr nützliches Attribut ist, das Zeichenfolgen direkt in Stilregeln umwandelt und dabei die Unterschiede in den Stilattributen der einzelnen Browser, wie z. B. cssFloat und styleFloat, ignoriert.

parentStyleSheet und parentRule sind beide für @import. Allerdings hat @import unter dem IE Probleme, sodass ich es grundsätzlich nicht verwende.