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

Docker erstellt Cluster-MongoDB-Implementierungsschritte

Beispiel zum Ändern von Stilen über CSS-Variablen

Docker erstellt Cluster-MongoDB-Implementierungsschritte

Natives JS zur Implementierung eines atmenden Karussells

Fallzusammenfassung zur Vue-Komponentenkommunikationsmethode

Lösen Sie das Problem der Verwendung des Swiper-Plugins in Vue

So löschen Sie Standardformate und legen allgemeine Formate in CSS fest

Docker implementiert MariaDB-Unterbibliotheken und -Untertabellen sowie Lese-/Schreibtrennungsfunktionen

Detaillierte Erklärung der Javascript-Grundlagenschleife

Vue-Formulareingabebindung V-Modell

Von CSS 3D zur räumlichen Koordinatenachse mit Quellcode

Detaillierte Einführung in den DOCTYPE-Typ

Artikel empfehlen

Linux-Methodenbeispiel zum Anzeigen aller Informationen des Prozesses

Tutorial zur Installation und Konfiguration von MySQL Workbench unter CentOS

So entfernen Sie die Kopfzeile aus der Elementtabelle

Implementierung der MySQL-Datensortierung (aufsteigend und absteigend)

Ein Artikel zum Verständnis der Erstellung, des Hochladens, Abrufens und Bereitstellens von Docker-Images

Einführung in Who-Befehlsbeispiele in Linux

Kernkompetenzen, die Web-Frontend-Entwicklungsingenieure beherrschen müssen

Einführung in die UFW-Firewall unter Linux

So schreiben Sie schönen HTML-Code

So installieren und implementieren Sie Zabbix 5.0 für Nginx

Mehrere Möglichkeiten, Axios in Vue zu kapseln

Detaillierte Erläuterung des Beispiels der Caching-Methode von Vue

Vue implementiert die Bottom-Query-Funktion

Detaillierte Erläuterung des Ausführungsprozesses der JavaScript-Engine V8

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8