So übergeben Sie Parameter über CSS an JS

1. Hintergrund, der durch CSS übergeben werden muss

Es gibt in CSS viele Verwendungsmöglichkeiten für Medienabfragen, z. B. zur Bestimmung der Gerätegröße, ob das Mausverhalten unterstützt wird, ob es sich um den Dunkelmodus oder den Energiesparmodus handelt usw.

Beispielsweise der Dunkelmodus und das dunkle Design, die in letzter Zeit oft erwähnt wurden:

@media (bevorzugtes Farbschema: dunkel) {
    /* Dunkler Modus, dunkles Design*/
}
@media (bevorzugtes Farbschema: hell) {
    /* Helles Design */
}

CSS kann automatisch erkannt werden, aber manchmal müssen wir in JS auch unterschiedliche Interaktionslogiken implementieren oder je nach unterschiedlichen Systemthemen unterschiedliche Inhalte rendern.

was zu tun? Es scheint, dass es derzeit keine vorgefertigte JS-API zum Erkennen des Systemmodus gibt, daher kann ich mich nur auf die Übergabe von Parametern in CSS verlassen. Dies ist ein typisches Szenario; es gibt viele ähnliche Szenarien.

Zum Beispiel:

1. Konsistenz der CSS- und JS-Rahmenbreite

Wenn wir ein responsives Layout erstellen, müssen wir häufig einen kritischen Breitenwert festlegen. Wenn beispielsweise die Breite des Geräts weniger als 640 Pixel beträgt, gehen wir davon aus, dass es das mobile Endgerät betreten hat. Wenn die Breite weniger als 480 Pixel beträgt, verwenden wir das Layout für mobile Endgeräte usw.

Zu diesem Zeitpunkt muss der JavaScript-Code auch unterschiedliche Interaktionseffekte basierend auf dieser kritischen Breite implementieren. Wenn sie größer als ein bestimmter Wert ist, handelt es sich um die Interaktion unter dem PC-Layout, und wenn sie kleiner als ein bestimmter Wert ist, handelt es sich um die Interaktion unter dem mobilen Layout.

Viele Leute treffen während der eigentlichen Entwicklung Konventionen für CSS-Code und JS-Code, zum Beispiel:

@media screen und (max-width: 480px) {
    /* Responsives Layout für kleine Bildschirmbreiten*/
}
wenn (Bildschirmbreite < 480) {
    /* Interaktionsverhalten bei kleiner Bildschirmbreite*/
}

Wenn es ein Problem mit dieser Konvention gibt, stellt sich nach einer gewissen Zeit im Projekt heraus, dass es ein Problem mit dieser kritischen Breite gibt. Wenn sich das Mobiltelefon beispielsweise im Querformat befindet, ist seine Breite größer als 480 Pixel, was auch die Layoutmethode für mobile Endgeräte sein sollte, sodass der Entwickler sie auf 640 Pixel geändert hat.

@media screen und (max-width: 640px) {
    /* Responsives Layout für kleine Bildschirmbreiten*/
}

Wenn Sie daher vergessen, dass dieses Urteil auch im JS-Code vorhanden ist, tritt ein Fehler auf.

Wenn die Bildschirmbeurteilung in unserem JavaScript-Code bei der ursprünglichen Implementierung auf CSS-Parametern beruhte, gäbe es derartige Wartungsprobleme nicht.

2. Unterstützt der Browser die Pseudoklasseninteraktion :hover?

Wir werden einige UI-Komponenten entwickeln und hoffen, dass diese auf Desktop-, Mobil- und IoT-Geräten gängige Verwendung finden.

Einige Komponenten auf dem Desktop sind sehr gut und praktisch, wenn wir MouseEnter- oder MouseOver-Ereignisse verwenden, um das Erlebnis zu erzielen. Aber wenn diese Dinge auf Mobilgeräten und anderen Touchscreen-Geräten verwendet werden, wird es weltweit zu Problemen kommen, weil es so etwas wie Hovern nicht gibt.

Glücklicherweise gibt es im CSS-Code eine Medienabfrage, um festzustellen, ob der Browser die Interaktion mit der Pseudoklasse :hover unterstützt (für diese Abfrage gibt es eine spezielle Artikeleinführung, klicken Sie hier):

@media (any-hover: keine) {
    /* Das Gerät unterstützt keine Hover-Ereignisse*/
}

Leider gibt es in JS keine solche API für eine direkte Beurteilung. Viele Leute treffen diese Beurteilung wahrscheinlich, indem sie feststellen, ob der Browser Ereignisse wie Touchstart unterstützt. Leider ist diese Beurteilungsmethode ungenau. Da viele Touch-Geräte auch mit Mausgeräten verbunden werden können, sollten auch Hover-Ereignisse gut unterstützt werden.

Daher besteht die endgültige Methode darin, CSS-Medienabfragen zur Beurteilung zu verwenden und das Beurteilungsergebnis dann als Parameter an js zu übergeben.

Okay, jetzt lautet die Frage: Wie übergeben wir in diesen drei Fällen unsere Parameter über CSS an den JS-Code?

2. So übergeben Sie CSS-Parameter an JS

Normalerweise verwende ich die folgenden beiden Methoden, um Parameter von CSS an JS zu übergeben.

1. Übergabe von Inhaltsparametern für Inhaltspseudoelemente

Zum Beispiel:

@media (any-hover: keine) {
    body::vor {
        Inhalt: „hoverNone“;
        Anzeige: keine;
    }
}

An dieser Stelle können Sie JS-Code verwenden, um die vom Body-Pseudoelement übergebenen Informationen abzurufen:

var strContent = getComputedStyle(document.body, '::vor').inhalt;
// Wenn das Ergebnis von strContent „none“ ist, bedeutet dies, dass Hover unterstützt wird.
// Das strContent-Ergebnis ist „hoverNone“, was bedeutet, dass Hover nicht unterstützt wird und durch ein Klickereignis ersetzt werden muss.

In diesem Artikel wird der obige CSS-Code vorab vergraben. Öffnen Sie daher im Chrome-Browser die Konsole, rufen Sie den mobilen Vorschaumodus auf, rufen Sie den JS-Test auf und Sie können sehen, dass die von unserem CSS übergebenen Zeichenfolgeninformationen von JS abgerufen werden.

An diesem Punkt können wir die in CSS übergebenen Informationen basierend auf den Pseudoelementen ::before und ::after in Verbindung mit dem Inhaltsattribut abrufen.

Der Vorteil dieser Parameterübergabemethode besteht in ihrer relativ guten Kompatibilität. Ihr Nachteil ist jedoch offensichtlich, dass die Anzahl der Parameterwerte, die wir übergeben, begrenzt ist. Wenn wir mehrere Werte gleichzeitig übergeben möchten, wird dies etwas schwierig. Zu diesem Zeitpunkt können Sie die folgende Methode mithilfe benutzerdefinierter CSS-Attribute ausprobieren.

2. Parameterübergabe für benutzerdefinierte CSS-Eigenschaften (CSS-Variablen)

Kommen wir direkt zum Code. Mit benutzerdefinierten CSS-Eigenschaften (CSS-Variablen) wird die Entwicklung und Wartung des Dunkelmodus und des Hellmodus relativ einfach. Darüber hinaus können wir diese benutzerdefinierte CSS-Eigenschaft auch zur Mustererkennung für JS verwenden.

:Wurzel {
    --Modus: „unbekannt“;
}
@media (bevorzugtes Farbschema: dunkel) {
    /* Dunkler Modus */
    :Wurzel {
         --Modus: „dunkel“;
         --colorLink: #bfdbff;
         --Farbmarkierung: #cc0000;
         --colorText: #ffffff;
         --Farblicht: #777777;
    }
}
@media (bevorzugtes Farbschema: hell) {
    /* Helles Design */
    :Wurzel {
         --Modus: „Licht“;
         --Farblink: #34538b;
         --Farbmarkierung: #cc0000;
         --Farbtext: #000000;
         --Farblicht: #cccccc;
    }
}

JS-Erkennungscode:

var mode = getComputedStyle(document.documentElement).getPropertyValue('--mode').trim();
// Wenn das Modusergebnis „dunkel“ ist, bedeutet dies Nachtthema, Dunkelmodus, dunkler Stil, Augenschutzmodus.
// Das Modusergebnis weicht vom Standardmodus ab.

Das Ergebnis der Ausführung auf meinem Computer ist beispielsweise wie folgt:

Unter Mac OS X oder mobilen Geräten sollten andere Werte angezeigt werden. Testet es gerne und schickt mir einen Screenshot, damit ich es im Artikel aktualisieren kann.

Der Vorteil der Verwendung herkömmlicher benutzerdefinierter CSS-Eigenschaften besteht darin, dass sie sehr flexibel sind und wir viele, viele Variablen definieren können. Und tatsächlich müssen wir uns über Kompatibilitätsprobleme keine Gedanken machen. Warum? Denn jeder Gerätebrowser, der den Nachtmodus unterstützt, muss benutzerdefinierte CSS-Eigenschaften unterstützen.

Daher ist die Verwendung von benutzerdefinierten CSS-Eigenschaften zum Übergeben von Parametern im Großen und Ganzen die beste Implementierung im Dunkelmodus-Szenario. Wenn das Szenario jedoch auf dem responsiven Layout der Gerätebreite basiert, ist es besser, zum Übergeben von Parametern das CSS-Inhaltsattribut zu verwenden.

Zusammenfassen

Oben ist die Methode zum Übergeben von Parametern an JS über CSS, die ich Ihnen vorgestellt habe. Ich hoffe, sie wird Ihnen hilfreich sein. Vielen Dank für Ihre Unterstützung der Website 123WORDPRESS.COM!