CSS变量之var()函数的应用——动态修改样式 root的使用

一、css变量

body {--foo: #7F593F;--urls: './img/xxx.jpg';
}

变量的名称可以用数字、汉字等，不能包含**$，[，^，(，%**等字符，变量的值也是可以使用各种属性值：
如：

// 定义css变量
:root{--黑色背景: #3a6b5c;--255: rgb(256, 256, 256);--pd: 10px 20px;--height: 200px;--transition-duration: .36s;--margin-top: calc(2vh + 20px);
}// 使用css变量
div{color: var(--256);margin-top: var(--margin-top);padding: var(--pd);width: var(--height);height: var(--height);background-color: var(--黑色背景, #000);
}

:root是CSS 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 元素，除了优先级更高之外，与 html 选择器相同

二 、var()函数使用

:root {--黑色背景: #3a6b5c;
}
body {background-color: var(--黑色背景, #000);
}

如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

:root {--黑色背景: #3a6b5c;
}body {background-color: var(--黑色背景, #000);
}

三、复杂的CSS3 calc()计算

body {--col: 4;--margins: calc(24px / var(--col));
}

四、JavaScript 操作 CSS 变量的写法如下。

// 设置变量
document.body.style.setProperty('--黑色主题', '#7F583F');// 读取变量
document.body.style.getPropertyValue('--黑色主题').trim();
// '#7F583F'// 删除变量
document.body.style.removeProperty('--黑色主题');