Example of how to modify styles via CSS variables

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

Recommend

Detailed tutorial of pycharm and ssh remote access server docker

Background: Some experiments need to be completed...

Detailed explanation of replication configuration example between mysql containers

background Last week the company trained on MySQL...

Implementation of CSS border length control function

In the past, when I needed the border length to b...

Share 9 Linux Shell Scripting Tips for Practice and Interviews

Precautions 1) Add interpreter at the beginning: ...

How to set background color and transparency in Vue

Background color and transparency settings As sho...

A detailed introduction to Tomcat directory structure

Open the decompressed directory of tomcat and you...

Vue integrates Tencent Map to implement API (with DEMO)

Table of contents Writing Background Project Desc...

Ubuntu 19.10 enables ssh service (detailed process)

It took me more than an hour to open ssh in Ubunt...

A very detailed explanation of Linux C++ multi-thread synchronization

Table of contents 1. Mutex 1. Initialization of m...

Vue custom table column implementation process record

Table of contents Preface Rendering setTable comp...

A brief discussion on using virtual lists to optimize tables in el-table

Table of contents Preface Solution Specific imple...

MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control

Table of contents 1. Concurrent access control 2....

WeChat applet implementation anchor positioning function example

Preface In the development of small programs, we ...

Detailed explanation of the principles and usage of MySQL data types and field attributes

This article describes the MySQL data types and f...

Vue image cropping component example code

Example: tip: This component is based on vue-crop...