So erhalten Sie alle benutzerdefinierten Eigenschaften auf einer Seite in JavaScript

In diesem Artikel wird beschrieben, wie Sie JavaScript verwenden, um CSS -benutzerdefinierte Eigenschaftswerte zu erhalten und ein automatisch generiertes Palettenbeispiel zu erstellen. Wir wissen, dass Sie getComputedStyle verwenden und getPropertyValue auf eine einzelne benutzerdefinierte Eigenschaft zugreifen können. Wenn es jedoch mehrere Eigenschaften gibt, müssen Sie viel doppelter Code schreiben. In diesem Artikel wird angezeigt, wie dieser Prozess automatisiert wird.

Angenommen, wir haben mehrere benutzerdefinierte Eigenschaften für das HTML -Element deklariert:

 html {
  -Farbakcent: #00eb9b;
  -Color-Accent-Sekundär: #9db4ff;
  -Color-Accent-Tertiary: #f2c0ea;
  -Color-Text: #292929;
  -Color-Divider: #D7D7D7;
}

Wir können automatisch alle benutzerdefinierten Eigenschaften erhalten und eine Palette in den folgenden Schritten erzeugen:

1. Holen Sie sich alle Stylesheets: Verwenden Sie document.styleSheets , um alle Stylesheets (innerlich und äußerlich) auf der Seite zu erhalten.

2. Filter von Stylesheets Drittanbieter: Aus Sicherheitsgründen werden nur Stylesheets auf der aktuellen Domäne verarbeitet. Wir verwenden die isSameDomain -Funktion, um Stylesheets von Drittanbietern herauszufiltern:

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

3. Holen Sie sich alle Stilregeln: Verwenden Sie reduce und concat -Methoden, um alle Stilregeln in ein Array zusammenzuführen.

4. Filter-Nicht-Basis-Stilregeln: Nur Regeln vom Typ CSSStyleRule werden beibehalten, und andere Arten von Regeln (z. B. CSSMediaRule ). Verwenden Sie die isStyleRule -Funktion, um zu filtern:

    const isStylerule = (Regel) => regel.typ === 1;

5. Nehmen Sie die Namen und Werte aller Attribute ab: durch das style -Attribut ( CSSStyleDeclaration -Objekt) jeder Stilregel iterieren, und verwenden Sie map -Methode, um die Namen und Werte aller Attribute zu erhalten.

6. Filter-Nicht-Kunden-Attribute: Nur benutzerdefinierte Attribute beginnen mit -- bleiben erhalten. Verwenden Sie die filter , um zu filtern.

7. Generieren Sie HTML: Verwenden Sie die reduce der Methode, um HTML -Code basierend auf den erhaltenen benutzerdefinierten Attributen und Werten zu generieren, und verwenden Sie ihn, um die Farbpalette anzuzeigen. Wir verwenden<div> Elemente werden als Farbmuster und Setfarben mithilfe von Inline -Stilen verwendet. Externe CSS verwendet <code>var(--color) , um die Hintergrundfarbe zu setzen.

   Der endgültige Code ähnelt der folgenden Struktur (siehe den Originaltext für bestimmte Implementierungsdetails):

    const getCsScustomPropindex = () => [... Dokument.Stylesheets]
     .filter (Issamedomain)
     .Reduce ((Finalarr, Blatt) => Finalarr.Concat (
       [... Sheet.cssrules]
         .filter (isStylerule)
         .Reduce ((Propvalarr, Regel) => {
           const props = [... Regel.Style]
             .MAP ((propname) => [propname.trim (), regel.style.getPropertyValue (PropName) .trim ()])
             filter (([propname]) => propname.indexof ("-") === 0);
           return [... propvalarr, ... Requisiten];
         }, [])
     ), []);
   
   const csScustomPropIndex = getCsScustomPropIndex ();
   document.querySelector (". Farben"). Innerhtml = csScustomPropindex.Reduce (
     (str, [prop, val]) => `$ {str}<div class="color__swatch" style="--color: ${val};"></div> "," ");

   Diese Methode generiert automatisch eine Farbpalette, in der alle CSS -benutzerdefinierten Eigenschaften angezeigt werden, ohne viel Code manuell schreiben zu müssen. In Zukunft können Sie die Eigenschaft CSSStyleRule.styleMap in CSS -Typed -Objekt -Modellstufe 1 verwenden, um den Code zu vereinfachen.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie alle benutzerdefinierten Eigenschaften auf einer Seite in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!