css var() 变量的用法、作用

最新推荐文章于 2024-07-10 15:14:06 发布

cookcyq

最新推荐文章于 2024-07-10 15:14:06 发布

阅读量1.2k

点赞数 3

分类专栏： HTML CSS 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/cookcyq__/article/details/121725497

版权

CSS 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

HTML

8 篇文章 0 订阅

订阅专栏

本文介绍了CSS变量var()的使用，通过定义全局变量并在JavaScript中动态修改，实现颜色等样式的变化。示例中展示了如何在按钮点击事件中改变元素背景色，并提及var()在UI框架如vant中的应用，支持主题切换。强调了var()相对于预处理语言如Sass的优势。

摘要由CSDN通过智能技术生成

var() 其实已经出了很久了，它的使用方式也很简单，就是纯粹定义/使用变量，咋们废话不多说，来看看使用案例

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
 <style type="text/css">
 	/* 在这里定义变量 */
   :root{
     --var-primary-color: red;
     --var-cyan-color: blue;
   }

   .box{
     width: 20px;
     height: 20px;
     /* 通过 var(变量名) 引入变量即红色 */
     background: var(--var-primary-color);
   }
 </style>
</head>
<body>
 <div class="box"></div>
 <button onclick="onChange()">改变颜色</button>
 <script type="text/javascript">
 	// 改变颜色
   function onChange() {
     // 通过 setProperty 函数将其 --var-primary-color 变量更改为绿色
     document.documentElement.style.setProperty('--var-primary-color', 'orange')
     // 你也可以用 var(--var-cyan-color) 的方式传递进去，它会自动转成对应的 blue
     // document.documentElement.style.setProperty('--var-primary-color', 'var(--var-cyan-color)')
   }
 </script>
</body>
</html>

效果图
在这里插入图片描述

我们可以看到，定义了变量后，在利用 JS 提供的 API 去更改它的变量，这也是笔者最喜欢它的一点，像 sass 这种 css 预处理编译器是做不到的，另外，它也支持 UI 框架标签颜色属性传递，如 vant 框架里面的 slider 标签的 active-color 属性

<van-slider 
class="slider"
 v-model="state.currentSize"
 :min="state.minSize" 
 :max="state.maxSize"
 active-color='var(--var-primary-color)'  传递变量进去依然生效
 />