CSS中变量的作用
CSS中的变量用于存放属性值，可统一修改样式，不需要再手动更改大量的属性值。
CSS变量需要用到两个方法 : root 和 var() 。
:root 是指文档的根元素，在其中定义的变量可作为 全局变量，例如：
:root{ /* 变量名：变量值 */ --col: #393939; }
var() 函数用于使用CSS变量，例如：
body { height: 500px; /* 属性：var(变量名) */ background-color: var(--col); }
注意：CSS变量严格区分大小写，变量名前需要有 -- 符号，例如：--col 。
JavaScript修改CSS变量
// document.documentElement.style.setProperty("变量名","变量值"); document.documentElement.style.setProperty("--back","#FFFFFF");
- document.documentElement 属性可返回文档的根节点。
- setProperty() 方法用于设置CSS变量。
CSS变量使用代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS变量使用</title> <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } :root{ --back: #393939; --col: pink; --sizes: 300px; } body{ height: 100vh; background-color: var(--back); display: flex; justify-content: center; align-items: center; } #box{ width: var(--sizes); height: var(--sizes); background-color: var(--col); } #box p{ text-align: center; line-height: var(--sizes); font-size: 30px; color: var(--back); } </style> </head> <body> <div id="box"> <p onclick="cut()">点击切换</p> </div> <script type="text/javascript"> function cut(){ document.documentElement.style.setProperty("--back","#FFFFFF"); document.documentElement.style.setProperty("--col","aqua"); document.documentElement.style.setProperty("--sizes","200px"); } </script> </body> </html>
CSS变量使用效果
点击前：
点击后：
原文作者：吴小糖
创作时间：2022-8-22
