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 implementieren Sie Seitensprünge in einem Vue-Projekt

Beispiel zum Ändern von Stilen über CSS-Variablen

So implementieren Sie Seitensprünge in einem Vue-Projekt

Docker realisiert die Verbindung mit demselben IP-Netzwerksegment

Das WeChat Mini-Programm nutzt Simultanübersetzung zur Implementierung der Spracherkennung

js, um einen Ein- und Ausblendeffekt des Bildes zu erzielen

Zusammenfassung häufiger Probleme und Lösungen in Vue (empfohlen)

Vollständige Schritte zum Implementieren des Standort-Punch-Ins mithilfe räumlicher MySQL-Funktionen

Implementierung des Seitenumblättereffekts durch Gleiten und des Klickereignisproblems auf dem mobilen Endgerät

JavaScript zum Anzeigen und Ausblenden des Dropdown-Menüs

MySQL verwendet UNIQUE, um das Einfügen nicht doppelter Daten zu implementieren

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Artikel empfehlen

Lösung für das domänenübergreifende Problem der SpringBoot- und Vue-Interaktion

CSS-Ansichtsfenstereinheiten für schnelles Layout

Grafisches Tutorial zur Installations- und Konfigurationsmethode von Mysql5.7.14 (Lösung für Passwortprobleme)

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22 unter Windows 10

JavaScript zum Erzielen eines einfachen Drag-Effekts

Schritte zum Ausführen von ASP.NET Core im Docker-Container

Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL

Implementierung eines Web-Rechners mit nativem JavaScript

TypeScript-Aufzählungstyp

Detaillierte Schritte für einen reibungslosen Übergang von MySQL zu MariaDB

So verwenden Sie Axios, um mehrere wiederholte Anfragen in einem Projekt zu filtern

Installieren Sie MySQL 5.7.17 im Win10-System

Detaillierte Erläuterung der Installation des Nginx-Servers und der Lastausgleichskonfiguration auf einem Linux-System

Linux entfernt node.js vollständig und installiert es über den Befehl yum neu

In HTML eingebettetes Flash Lösung zum Einbetten von Flash-Dateien in den HTML-Webseitencode (Teil 2)