JavaScript implémente les compétences Scheme_Javascript de règles de style CSS créées dynamiquement

Il existe désormais de nombreux codes JavaScript dans les applications Web et nous recherchons toujours diverses solutions pour les rendre plus rapides.

1. Nous utilisons la délégation d'événements pour rendre la surveillance des événements plus efficace, 2. Nous utilisons la technologie anti-rebond des fonctions pour limiter le nombre de fois qu'une méthode donnée est appelée sur une période donnée. Veuillez vous référer à : Comment empêcher le déclenchement à haute fréquence des fonctions d'événement (traduction chinoise). ) 3. Nous utilisons le JavaScriptloader pour charger les ressources dont nous avons réellement besoin, etc.

Il existe un autre moyen de rendre nos pages plus rapides et plus efficaces. Il s'agit d'ajouter et de supprimer dynamiquement certains styles dans la feuille de style directement via JS, au lieu d'interroger constamment les éléments DOM et d'appliquer divers styles. Voici comment cela fonctionne.

Obtenir la feuille de style

Vous pouvez choisir n'importe quelle feuille de style pour ajouter des règles de style. Si vous disposez d'une certaine feuille de style, vous pouvez ajouter l'attribut ID à la balise ou dans la page HTML, puis obtenir l'objet CSSStyleSheet directement via l'attribut sheet de l'élément DOM. Les feuilles de style peuvent également être parcourues via document.styleSheets :

Copier le code Le code est le suivant : // Renvoie une liste de styles de type tableau StyleSheetList var feuilles = document.styleSheets; /* La valeur de retour est similaire à la suivante :

Liste des feuilles de style { 0 : CSSStyleFeuille, 1 : Feuille de style CSS, 2 : CSSStyleSheet, 3 : CSSStyleSheet, 4 : CSSStyleSheet, longueur : 5, Article : fonction > */

// Obtenez la première feuille, quel que soit l'attribut média var feuille = document.styleSheets[0];

Une attention particulière doit être portée à l'attribut media de la feuille de style - lorsque vous souhaitez l'afficher à l'écran, vous ne pouvez certainement pas ajouter de règles CSS à la feuille de style d'impression. Vous pouvez examiner de plus près les informations de propriété de l'objet CSSStyleSheet :

Copier le code Le code est le suivant : //La console affiche les informations de la première feuille de style console.log(document.styleSheets[0]); /* Valeur de retour :

Feuille de Style CSS cssRules : CSSRuleList[Objet] Désactivé : faux href : " http://davidwalsh.name/somesheet.css " Média : MediaList[object] OwnerNode : lien[objet] Règle du propriétaire : null feuilleStyleparent : null Règles : CSSRuleList[Object] Titre : nul Tapez : "texte/css" */

//Obtenir le type de média console.log(document.styleSheets[0].media.mediaText) /* La valeur de retour peut être : "tout" ou "imprimer" ou autre support appliqué à cette feuille de style */

Dans chaque cas, vous aurez certainement un moyen d'obtenir la feuille de style à laquelle vous souhaitez ajouter les règles.

Créer une nouvelle feuille de style

Dans de nombreux cas, la meilleure approche peut être de créer un nouvel élément C'est aussi très simple :

Copier le code Le code est le suivant : var feuille = (function() { // Créer la balise var style = document.createElement("style"); // Vous pouvez ajouter un attribut media (/media query, media query) // style.setAttribute("media", "écran") // style.setAttribute("media", "uniquement écran et (max-width : 1024px)")

// Hack WebKit :( Style.appendChild(document.createTextNode(""));

// Ajout de l'élément à la page document.head.appendChild(style);

return style.sheet; })();

Le drame est que WebKit nécessite un peu de piratage pour être créé correctement, mais nous n'avons qu'à nous soucier de cette feuille.

Insérer les règles

La méthode insertRule des feuilles de style n'était pas disponible dans les versions antérieures d'IE, bien qu'elle soit désormais la norme pour l'injection de règles. La méthode insertRule nécessite d'écrire l'intégralité de la règle CSS, qui est la même que dans la feuille de style :

Copier le code Le code est le suivant : sheet.insertRule("header { float: left; opacity: 0.8; }", 1); Bien que cette méthode API JavaScript semble un peu grossière, elle fonctionne comme ceci. Le deuxième paramètre index représente la position (index) où la règle doit être insérée. Ceci est également très utile pour que vous puissiez insérer la même règle/code, ce qui fera prendre effet aux règles suivantes. L'index par défaut est -1, qui représente la fin de toute la collection. Si vous souhaitez avoir des règles de contrôle supplémentaires/paresseuses, vous pouvez également ajouter la balise !important après une règle pour éviter les problèmes d'indexation.

Ajouter des règles - méthode addRule non standard

L'objet CSSStyleSheet possède une méthode addRule qui vous permet d'enregistrer des règles CSS dans la feuille de style. La méthode addRule accepte trois paramètres : le premier paramètre est le sélecteur, le deuxième paramètre est le code de la règle CSS, et le troisième est un index entier commençant à 0, indiquant la position du style (dans le même sélecteur) :

Copier le code Le code est le suivant : sheet.addRule("#myList li", "float: left; background: red !important;", 1); La valeur de retour de la méthode addRule est toujours -1, cette valeur n'a donc aucune signification pratique. N'oubliez pas que l'avantage de cette approche est que les éléments ajoutés à partir de la page se voient automatiquement appliquer les styles, ce qui signifie que vous n'avez pas besoin de les ajouter à des éléments spécifiques, mais de les injecter directement dans la page. Bien sûr, c'est plus efficace !

Règles d'application sécurisées

Étant donné que tous les navigateurs ne prennent pas en charge la méthode insertRule, il est préférable de créer une fonction wrapper pour gérer l'application des règles. Voici un hack rapide :

Copier le code Le code est le suivant : function addCSSRule(feuille, sélecteur, règles, index) { If("insertRule" dans la feuille) { sheet.insertRule(sélecteur "{" règles "}", index); > else if("addRule" dans la feuille) { sheet.addRule(sélecteur, règles, index); > > //Comment utiliser addCSSRule(document.styleSheets[0], "header", "float: left");

Cette méthode outil devrait couvrir toutes les situations où de nouvelles règles de style sont ajoutées. Si vous êtes préoccupé par les erreurs dans votre application, vous devez envelopper le code de la méthode dans un bloc try{} catch(e){}.

Insérer des règles de requête multimédia

Il existe deux manières d'ajouter des règles de requête multimédia. La première consiste à utiliser la méthode insertRule standard :

Copier le code Le code est le suivant : feuille.insertRule( "@media uniquement écran et (max-width : 1140px) { header { display: none; } }" ); Bien sûr, comme les anciennes versions d'IE ne prennent pas en charge insertRule, une autre méthode consiste à créer un élément STYLE, à spécifier l'attribut multimédia approprié, puis à ajouter le style à la nouvelle feuille de style. Cela peut nécessiter l’utilisation de plusieurs éléments STYLE, mais c’est simple. Je pourrais créer un objet, spécifier la requête multimédia et l'index, et les créer/obtenir de cette façon.

L'ajout dynamique de règles à une feuille de style est une méthode efficace et peut être plus simple que vous ne le pensez. Gardez cette approche à l’esprit pour votre prochaine grande application, car elle vous évitera de tomber dans des pièges tant en termes de code que de gestion des éléments.