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

Detailliertes Tutorial zum Veröffentlichen von Springboot-Projekten über das Docker-Plugin in IDEA

Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

In Front-End-Projekten ist das Hochladen von Anhä...

Beispiel zum Ändern von Stilen über CSS-Variablen

Detailliertes Tutorial zum Veröffentlichen von Springboot-Projekten über das Docker-Plugin in IDEA

Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen

So verwenden Sie den Linux-Befehl nl

Angular Cookie Lese- und Schreibvorgangscode

So installieren Sie Nginx in CentOS7

Details zum TypeScript-Mapping-Typ

Codebeispiele für allgemeine Docker-Datenvolumenvorgänge

Tutorial zur Installation und Konfiguration von MySQL 5.7.17 Zip. Lösung für MySQL-Startfehler.

So konfigurieren Sie Linux CentOS für die regelmäßige Ausführung von Skripten

MySQL weist eine Riddle-Sicherheitslücke auf, die zum Verlust von Benutzernamen und Passwörtern führen kann

Artikel empfehlen

Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

Zusammenfassung häufig verwendeter Leistungstestskripte für VPS-Server

MySQL InnoDB MRR-Optimierungshandbuch

Vollständige MySQL-Sicherung und schnelle Wiederherstellungsmethoden

Prinzip des Linux-Nohup-Befehls und Beispielanalyse

Bootstrap 3.0 Studiennotizen Grid-System-Fall

Öffentlicher Upload-Bereich für mehrere Typen von Anhangsbildern auf der Vue-Seite und anwendbares Faltfenster (Beispielcode)

Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit

So passen Sie die Höhe eines Divs an die Höhe des Browsers an

MySQL-Partitionierungspraxis mit Navicat

Bedingtes Rendering von Vue (v-if und v-show)

Der CSS-Stil löst das Problem der Anzeige von Auslassungspunkten, wenn der Text zu lang ist

Tutorial zum Herunterladen und Installieren von MySQL 8.0.12 WinX64

TypeScript-Aufzählungstypen im Detail erklären

JavaScript zum Erzielen eines einfachen Drag-Effekts