用CSS变量更改样式怎样做，代码是什么

发布时间：2023-09-19 15:29:01 所属栏目：语言来源：

导读：这篇文章主要介绍了用CSS变量修改样式怎样做，代码是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇用CSS变量修改样式怎样做，代码是什么文章都会有所收获，下面我们一起来看看吧

这篇文章主要介绍了用CSS变量修改样式怎样做，代码是什么相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇用CSS变量修改样式怎样做，代码是什么文章都会有所收获，下面我们一起来看看吧。

问题

js怎么去修改css伪类样式呢？但是js并没有伪类选择器，那么该怎么办呢？网上有不少方法，比如通过切换元素的类、在style中动态插入新的样式等。

那么这里再来一种方法，设置css变量（var），通过js去改变这个变量来实现。

示例：改变div的hover背景色



<style type="text/css">

    :root {

        --divHoverColor: red;

    }

    div {

        width: 100px;

        height: 100px;

        background: bisque;

    }

    div:hover {

        background: var(--divHoverColor);

    }

</style>



<div onClick="onDivClick('green')"/>



<script type="text/javascript">

    function onDivClick(value){

        document.documentElement.style.setProperty('--divHoverColor', value);

    }

</script>

那么，来认识下css variable吧

1. 基本用法

局部变量

div {

    --masterColor: red;

    background: var(--masterColor);

}

全局变量

/* 对于HTML来说，:root 表示 <html> 元素 */

:root {

    --masterColor: red;

}

div {

    background: var(--masterColor);

}

2. 语法

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

<custom-property-name> : 自定义属性名

<declaration-value> : 声明值（fallback value）

示例：

div {

    /*

    --masterColor未定义，所以背景色使用red

    它可以通过逗号分隔，定义多个声明值，var(--masterColor, red, green)

    */

    background: var(--masterColor, red);

}

变量可以通过var()进行引用

示例：

div {

    --masterColor: red;

    --bgColor: var(--masterColor)

}

注意：属性名是不能使用变量的

错误示例：

div {

    --bg: background;

    var(--bg): red;

}

3. 浏览器支持

Can I use

使用@support检测

@supports ( (--masterColor: red)) {

  /* supported */

}

@supports ( not (--masterColor: red)) {

  /* not supported */

}

使用JS检测

const isSupported = window.CSS && window.CSS.supports

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

if (isSupported) {

  /* supported */

} else {

  /* not supported */

}

参考

MDN

CSS Variable 规范

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!