这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

---

场景

想在CSS中使用JS变量（动态给CSS属性赋值）

解决方案

CSS变量

示例

以在 vue 项目为例：

• 在行内的 style 属性中定义 CSS 变量
• 赋值为 JS 变量
• 在 CSS 中使用行内定义好的 CSS 变量

<!--html-->
<div class="container">
	<div class="test" :style="{
		'--width':width,
		'--color':color,
		'--margin':margin
	}"></div>
</div>

// js
data(){
	return {
		width:'200px',
		color:'#f00',
		margin:'10px 20px 10px 20px',
	}
}

.test{
	width: var(--width);
	color: var(--color);
	margin: var(--margin);
}

---

知识点：CSS变量——自定义属性

概念与特性

• 带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用
• CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来

这意味着，同一个自定义属性名可以被多次赋值

语法

定义： --<name> : <declaration-value> 使用： color : var(--<name>)

var() 的使用 : developer.mozilla.org/zh-CN/docs/…

使用示例：

变量范围

• CSS变量可以在任何元素内定义
• 将CSS自定义属性添加到:root使其可用于页面中的所有元素
• 如果在.container选择器内添加变量，则仅在.container 内可用（作用域问题）

JS与CSS变量进行交互

• 设置元素样式：[el].style.setProperty（[属性名]，[值]） 获取元素样式：getComputedStyle（[el]） 获取元素样式属性值：[styles].getPropertyValue（[属性名]）

参考链接：

• js设置css自定义变量_CSS变量（自定义属性）
• developer.mozilla.org/zh-CN/docs/…
• Vue超好玩的新特性：在CSS中使用JS变量