在css中使用js变量

1）在行内的 style 属性中定义 CSS 变量

:style="{'-- color ': color }"   --代表自定义属性

带有前缀 -- 的属性名，比如 --example--name，表示的是带有值的自定义属性，其可以通过 var 函数在全文档范围内复用

CSS 自定义属性是可以级联的：每一个自定义属性可以多次出现，并且变量的值将会借助级联算法和自定义属性值运算出来

2）赋值为 JS 变量

Color=”red”

3）在 CSS 中使用行内定义好的 CSS 变量

color: var(--color);

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

在CSS代码中使用JS变量_css使用js变量-CSDN博客