Beispiel zum Ändern von Stilen über CSS-Variablen

Frage

Wie ändere ich den CSS-Pseudoklassenstil mit js? Aber js hat keinen Pseudoklassenselektor. Was sollen wir also tun? Im Internet gibt es zahlreiche Methoden, wie etwa das Wechseln von Elementklassen, das dynamische Einfügen neuer Stile in Stile usw.

Hier ist eine andere Methode, die darin besteht, die CSS-Variable (var) festzulegen und diese Variable über JS zu ändern, um dies zu erreichen.

Beispiel: Ändern der Hover-Hintergrundfarbe eines Div

<!-- css -->
<style type="text/css">
    :Wurzel {
        --divHoverColor: rot;
    }
    div {
        Breite: 100px;
        Höhe: 100px;
        Hintergrund: Biskuitporzellan;
    }
    div:hover {
        Hintergrund: var(--divHoverColor);
    }
</Stil>
<!-- html -->
<div beiKlick="onDivClick('grün')"/>
<!-- js -->
<Skripttyp="text/javascript">
    Funktion onDivClick(Wert){
        document.documentElement.style.setProperty('--divHoverColor', Wert);
    }
</Skript>

Lernen wir also CSS-Variablen kennen.

1. Grundlegende Verwendung

Lokale Variablen

div {
    --masterColor: rot;
    Hintergrund: var(--masterColor);
}

Globale Variablen

/* Bei HTML bezieht sich :root auf das <html>-Element*/
:Wurzel {
    --masterColor: rot;
}
div {
    Hintergrund: var(--masterColor);
}

2. Syntax

var( <Name der benutzerdefinierten Eigenschaft> [, <Deklarationswert> ]? )

<custom-property-name> : Name der benutzerdefinierten Eigenschaft

<declaration-value> : Deklarationswert (Fallback-Wert)

Beispiel:

div {
    /*
    --masterColor ist nicht definiert, daher ist die Hintergrundfarbe rot 
    Es können mehrere durch Kommas getrennte Deklarationswerte definiert werden, var(--masterColor, red, green)
    */
    Hintergrund: var(--masterColor, rot);
}

Auf Variablen kann mit var() verwiesen werden.

Beispiel:

div {
    --masterColor: rot;
    --bgColor:var(--masterColor)
}

Hinweis: Variablen können nicht in Attributnamen verwendet werden.

Fehlerbeispiel:

div {
    --bg: Hintergrund;
    var(--bg): rot;
}

3. Browser-Unterstützung

Kann ich

Verwenden der @support-Erkennung

@supports ( (--masterColor: rot)) {
  /* unterstützt */
}
@supports ( nicht (--masterColor: rot)) {
  /* nicht unterstützt */
}

Verwenden der JS-Erkennung

const isSupported = window.CSS && window.CSS.supports 
    && window.CSS.supports('--masterColor', 'rot');

if (wird unterstützt) {
  /* unterstützt */
} anders {
  /* nicht unterstützt */
}

siehe

MDN
CSS-Variablenspezifikation

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: HTML-, CSS- und JS-Kompatibilitätsbaum (IE, Firefox, Chrome)

>>: Vorteile und Nachteile des MySQL Advanced Learning Index sowie Nutzungsregeln

So verwenden Sie den Linux-Befehl „basename“

Beispiel zum Ändern von Stilen über CSS-Variablen

So verwenden Sie den Linux-Befehl „basename“

Ideen und Codes zur Realisierung des Lupeneffekts in js

Einige nützliche Methoden zur Meta-Einstellung (unbedingt lesen)

Beispiel für die Implementierung einer nahtlosen Endlosschleife im Hintergrund mithilfe einer CSS-Animation

Lösung für MySQL-Fehler beim Ändern des SQL-Modus

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.6.15 unter Windows 8

Zusammenfassung der Ereignisbehandlung im Vue.js-Frontend-Framework

Docker löst das Problem, dass das Terminal kein Chinesisch eingeben kann

XHTML-Erste-Schritte-Tutorial: XHTML-Hyperlinks

Verwenden von jQuery zum Implementieren des Karusselleffekts

Artikel empfehlen

Tipps zur Kurzschrift in JavaScript

Detaillierte Erklärung zum Einfügen gängiger Nginx-Befehle in Shell-Skripte

Beispielcode zur Implementierung der Bereitstellung mehrerer Anwendungen mit Tomcat+Nginx

Schritte zum Erstellen Ihres eigenen YUM-Repositorys

Liste häufig verwendeter Escape-Codes für HTML: Größer als, Kleiner als, Leerzeichen, Anführungszeichen usw.

Detaillierte Erläuterung des Startens und Einhängens des Docker-Nginx-Containers in den lokalen

Vue3+Element+Ts implementiert grundlegende Such-Resets und andere Funktionen des Formulars

Vue Element UI-Komponente für benutzerdefinierte Beschreibungsliste

Erläuterung der Dockerfile-Anweisungen und der grundlegenden Struktur

vue cli3 implementiert die Schritte der Verpackung nach Umgebung

Die richtige Methode zur Installation von MySQL mit Yum auf Alibaba Cloud CentOS 7 (empfohlen)

Eine vollständige Liste häufig verwendeter Linux-Befehle (empfohlene Sammlung)

Vue implementiert unregelmäßige Screenshots

Zusammenfassung der allgemeinen MySQL-SQL-Anweisungen einschließlich komplexer SQL-Abfragen

Was ist Nginx-Lastausgleich und wie wird er konfiguriert?