CSS变量 —— 在CSS中使用JS变量，使用JS操作CSS

场景：

想在CSS中使用JS变量

解决方案：

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 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来

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

语法

定义：

-- :

使用：

color : var(--)

var() 的使用 : var() - CSS（层叠样式表） | MDN

使用示例：

变量范围

CSS变量可以在任何元素内定义

将CSS自定义属性添加到:root使其可用于页面中的所有元素

如果在.container选择器内添加变量，则仅在.container 内可用（作用域问题）

JS与CSS变量进行交互

设置元素样式：[el].style.setProperty（[属性名]，[值]）

获取元素样式：getComputedStyle（[el]）

获取元素样式属性值：[styles].getPropertyValue（[属性名]）