在CSS中使用JS变量

场景：

想在CSS中使用JS变量

示例： 以在 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',
	}

//css
.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（[属性名]）