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