这篇文章将为大家详细讲解有关怎么利用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变量修改样式就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
网站名称：怎么利用CSS变量修改样式
网站地址：
http://bjjierui.cn/article/pegceo.html
