Parlons à nouveau de l'ajout dynamique de règles de style

J'avais l'habitude de donner une fonction utile dans un article de blog , et elle a été largement utilisée dans plusieurs de mes articles de blog. J'ai beaucoup lu récemment, j'ai donc écrit ce billet de blog pour trier les nouvelles choses que j'ai apprises.

Il ne fait aucun doute que, basé sur le principe de séparation des performances et de la structure, importer directement une nouvelle feuille de style est le meilleur choix, mais dans certains cas, cela ne fonctionnera pas. Par exemple, si nous créons un DIV déplaçable, du point de vue de. en définissant les styles, il s'agit de le positionner absolument pour éviter qu'il n'affecte le flux du document d'origine, puis de modifier progressivement ses valeurs en haut et à gauche pour obtenir l'effet de mouvement. Le glisser ayant une notion temporelle, 24 images par seconde, il est impossible de tout inclure dans la feuille de style. Par conséquent, il est très nécessaire de générer dynamiquement des règles de style et de modifier rapidement les règles de style. Dans DOM2.0, de nombreuses interfaces ont été étendues.

Pour prendre du recul, la séparation entre performances et structure ne se limite pas à l’importation de feuilles de style. Vous savez, il existe trois types de styles : les styles externes, les styles internes et les styles en ligne.

• Les styles externes, ceux mentionnés ci-dessus, sont écrits dans un fichier CSS séparé.
• Les styles internes sont écrits indépendamment dans une balise de style, généralement placée dans la balise head. Le style généré par la fonction que j'ai fournie en dernier est le style interne.
• Les styles en ligne sont des styles écrits dans l'attribut style de l'élément.

Les interfaces nouvellement ajoutées sont principalement concentrées dans des styles externes - je dis interfaces car les implémentations correspondantes sont fournies par le navigateur. Les gars arrogants comme IE6 n'ignorent jamais leur existence.

Dans le modèle W3C, la balise de lien et la balise de style de type "text/css" représentent toutes deux un objet CSSStyleSheet. Nous pouvons obtenir tous les objets CSSStyleSheet de la page actuelle via document.styleSheets, mais il s'agit d'une collection, pas simple. tableau. Chaque objet CSSStyleSheet possède les propriétés suivantes,

• type : renvoie toujours la chaîne "text/css".
• désactivé : cela a le même effet que l'entrée désactivée, et la valeur par défaut est false.
• href : renvoie l'URL, si c'est une balise de style, elle est nulle.
• title : Renvoie la valeur de son titre. Le titre est le même que le titre d'un élément ordinaire. Vous pouvez écrire ce que vous voulez.
• media : les éléments renvoyés par IE et Firefox ne sont pas cohérents, c'est donc difficile à dire. media est utilisé pour spécifier pour quels appareils les règles de style qu'il possède sont valides. La valeur par défaut est all.
• OwnerRule : renvoie un objet CSSRule en lecture seule si la feuille de style est introduite avec @import.
• cssRules : renvoie une collection d'objets de règles de style en lecture seule (objets CSSStyleRule).

L'objet règle de style (objet CSSStyleRule) a été développé par le W3C afin de définir le style plus en détail. Par exemple, l'objet suivant correspond à un objet règle de style :

bouton[type] {
remplissage : 4 px, 10 px, 4 px, 7 px ;
hauteur de ligne : 17 px ;
}

L'objet règle de style possède les attributs principaux suivants : type, cssText, parentStyleSheet, parentRule.

Le type est quelque peu similaire à nodeType, qui subdivise les règles de style. Il utilise un entier pour représenter son type. La situation spécifique est la suivante

• 0 : CSSRule.UNKNOWN_RULE
• 1 : CSSRule.STYLE_RULE (définir un objet CSSStyleRule)
• 2 : CSSRule.CHARSET_RULE (définit un objet CSSCharsetRule, utilisé pour définir le jeu de caractères de la feuille de style actuelle, la valeur par défaut est la même que celle de la page Web actuelle)
• 3 : CSSRule.IMPORT_RULE (définir un objet CSSImportRule, qui consiste à utiliser @import pour introduire d'autres feuilles de style)
• 4 : CSSRule.MEDIA_RULE (définir un objet CSSMediaRule, utilisé pour définir si ce style est utilisé pour les moniteurs, les imprimantes, les projecteurs, etc.)
• 5 : CSSRule.FONT_FACE_RULE (définir un objet CSSFontFaceRule, @font-face de CSS3)
• 6 : CSSRule.PAGE_RULE (définir un objet CSSPageRule)

Inutile de dire que cssText est un attribut très utile qui convertit directement les chaînes en règles de style, en ignorant les différences d'attributs de style de chaque navigateur, tels que cssFloat et styleFloat.

parentStyleSheet et parentRule sont tous deux pour @import. Cependant, @import a des problèmes sous IE, donc je ne l'utilise pas.