怎么利用CSS变量修改样式

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

改变div的hover背景色

<!-- 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>

那么，来认识下css variable吧

1. 基本用法

局部变量

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

全局变量

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

2. 语法

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

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

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

示例：

div {        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)) {  }@supports ( not (--masterColor: red)) {  }

使用JS检测

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

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