Comment obtenir toutes les propriétés personnalisées sur une page en javascript

Cet article décrit comment utiliser JavaScript pour obtenir des valeurs de propriété personnalisées CSS et créer un exemple de palette généré automatiquement. Nous savons que vous pouvez utiliser getComputedStyle et getPropertyValue pour accéder à une seule propriété personnalisée, mais s'il existe plusieurs propriétés, vous devrez écrire beaucoup de code en double. Cet article montrera comment automatiser ce processus.

Supposons que nous ayons déclaré plusieurs propriétés personnalisées sur l'élément HTML:

 html {
  --Color-Accent: # 00EB9B;
  --Color-Accent-Secondary: # 9DB4FF;
  --Color-Accent-tertiaire: # F2C0EA;
  --Color-Text: # 292929;
  --Color-divider: # d7d7d7;
}

Nous pouvons obtenir automatiquement toutes les propriétés personnalisées et générer une palette via les étapes suivantes:

1. Obtenez tous les feuilles de style: utilisez document.styleSheets pour obtenir tous les feuilles de style (intérieure et extérieure) sur la page.

2. Filtre des feuilles de styles tiers: pour des raisons de sécurité, seuls les feuilles de style sur le domaine actuel sont traitées. Nous utilisons la fonction isSameDomain pour filtrer leshets de style tiers:

    const issameDomain = (Stylesheet) => {
     if (! Stylesheet.href) retourne true;
     return stylesheet.href.indexof (window.location.origin) === 0;
   };

3. Obtenez toutes les règles de style: utilisez des méthodes reduce et concat pour fusionner toutes les règles de style dans un tableau.

4. Règles de style de style non-base filtrant: seules les règles de type CSSStyleRule sont conservées et d'autres types de règles (tels que CSSMediaRule ). Utilisez la fonction isStyleRule pour filtrer:

    const isstylerule = (règle) => règle.type === 1;

5. Obtenez les noms et valeurs de tous les attributs: itérer via l'attribut style (objet CSSStyleDeclaration ) de chaque règle de style et utilisez map pour obtenir les noms et valeurs de tous les attributs.

6. Filtrez des attributs non personnalisés: seuls les attributs personnalisés en commençant par -- sont conservés. Utilisez la méthode filter pour filtrer.

7. Générer HTML: Utilisez la méthode reduce pour générer du code HTML en fonction des attributs et des valeurs personnalisés obtenus, et utilisez-le pour afficher la palette de couleurs. Nous utilisons<div> Les éléments sont utilisés comme échantillons de couleurs et définissent des couleurs à l'aide de styles en ligne. Le CSS externe utilise <code>var(--color) pour définir la couleur d'arrière-plan.

   Le code final sera similaire à la structure suivante (voir le texte d'origine pour les détails d'implémentation spécifiques):

    const getcsscustomPropIndex = () => [... document.stylesheets]
     .
     .reduce ((finalarr, feuille) => finalarr.concat (
       [... sheet.cssrules]
         .filter (isstylerule)
         .reduce ((propvalarr, règle) => {
           const props = [... Rule.Style]
             .map ((propName) => [propName.trim (), règle.style.getPropertyValue (propName) .trim ()])
             .Filter (([propName]) => propName.Indexof ("-") === 0);
           return [... propvalarr, ... accessoires];
         }, [])
     ), []);
   
   const csscustomPropIndex = getcsscustomPropIndex ();
   document.QuerySelect
     (str, [prop, val]) => `$ {str}<div class="color__swatch" style="--color: ${val};"></div> `," ");

   Cette méthode génère automatiquement une palette de couleurs qui affiche toutes les propriétés personnalisées CSS sans avoir à écrire beaucoup de code manuellement. À l'avenir, vous pouvez utiliser la propriété CSSStyleRule.styleMap dans CSS Typted Object Model Level 1 Braft pour simplifier le code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!