怎么利用CSS变量修改样式

这篇文章将为大家详细讲解有关怎么利用CSS变量修改样式，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

创新互联专注于企业营销型网站、网站重做改版、四川网站定制设计、自适应品牌网站建设、H5场景定制、商城网站开发、集团公司官网建设、成都外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为四川等各大城市提供网站开发制作服务。

改变div的hover背景色

    :root {
        --divHoverColor: red;
    }
    div {
        width: 100px;
        height: 100px;
        background: bisque;
    }
    div:hover {
        background: var(--divHoverColor);
    }





    function onDivClick(value){
        document.documentElement.style.setProperty('--divHoverColor', value);
    }

那么，来认识下css variable吧

1. 基本用法

局部变量

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

全局变量

/* 对于HTML来说，:root 表示  元素 */
:root {
    --masterColor: red;
}
div {
    background: var(--masterColor);
}

2. 语法

var( [, ]? )

: 自定义属性名

: 声明值（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 */
}

关于怎么利用CSS变量修改样式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。