Example of how to modify styles via CSS variables

question

How to modify CSS pseudo-class style with js? But js does not have a pseudo-class selector, so what should we do? There are many methods on the Internet, such as switching element classes, dynamically inserting new styles in style, etc.

Then here is another method, which is to set the CSS variable (var) and change this variable through JS to achieve it.

Example: Change the hover background color of a div

<!-- css -->
<style type="text/css">
    :root {
        --divHoverColor: red;
    }
    div {
        width: 100px;
        height: 100px;
        background: bisque;
    }
    div:hover {
        background: var(--divHoverColor);
    }
</style>
<!-- html -->
<div onClick="onDivClick('green')"/>
<!-- js -->
<script type="text/javascript">
    function onDivClick(value){
        document.documentElement.style.setProperty('--divHoverColor', value);
    }
</script>

So, let’s get to know CSS variables.

1. Basic usage

Local variables

div {
    --masterColor: red;
    background: var(--masterColor);
}

Global variables

/* For HTML, :root refers to the <html> element*/
:root {
    --masterColor: red;
}
div {
    background: var(--masterColor);
}

2. Syntax

var( <custom-property-name> [, <declaration-value> ]? )

<custom-property-name> : custom property name

<declaration-value> : declaration value (fallback value)

Example:

div {
    /*
    --masterColor is undefined, so the background color is red 
    It can define multiple declaration values separated by commas, var(--masterColor, red, green)
    */
    background: var(--masterColor, red);
}

Variables can be referenced using var()

Example:

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

Note: Variables cannot be used in attribute names.

Error example:

div {
    --bg: background;
    var(--bg): red;
}

3. Browser Support

Can I use

Using @support detection

@supports ( (--masterColor: red)) {
  /* supported */
}
@supports ( not (--masterColor: red)) {
  /* not supported */
}

Using JS detection

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

if (isSupported) {
  /* supported */
} else {
  /* not supported */
}

refer to

MDN
CSS Variable Specification

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: HTML&CSS&JS compatibility tree (IE, Firefox, Chrome)

>>: MySQL advanced learning index advantages and disadvantages and rules of use

Detailed analysis of classic JavaScript recursion case questions

Example of how to modify styles via CSS variables

Detailed analysis of classic JavaScript recursion case questions

How to connect idea to docker to achieve one-click deployment

MySQL 5.6 compressed package installation method

Tomcat server security settings method

Solution to the problem that the page is blank when opening the page with source file in IE7

JavaScript imitates Xiaomi carousel effect

About VSCode formatting JS automatically adding or removing semicolons

Query process and optimization method of (JOIN/ORDER BY) statement in MySQL

Detailed explanation of six web page image carousel effects implemented with JavaScript

mysql creates root users and ordinary users and modify and delete functions

Recommend

Google Translate Tool: Quickly implement multilingual websites

A brief understanding of the relevant locks in MySQL

MySQL 5.7.21 installation and configuration tutorial under Window10

Summary of the use of three for loop statements in JavaScript (for, for...in, for...of)

A Deep Dive into the MySQL InnoDB Storage Engine

Detailed explanation of MySQL Workbench usage tutorial

HTML Self-study Journey (I) Basic Elements and Attributes Practice (Write Your Own Code)

Code comment writing standards during web page production

Detailed tutorial on deploying Hadoop cluster using Docker

Detailed explanation of the implementation of shared modules in Angular projects

Mysql uses stored procedures to quickly add millions of data sample code

Analysis of the difference between Mysql InnoDB and MyISAM

Comparison of div and span in HTML_PowerNode Java Academy

CSS HACK for IE6/IE7/IE8/IE9/FF (summary)

Detailed tutorial on building a private Git server on Linux