Js操作修改CSS变量

在Less/Sass/CSS中定义变量

在less中,使用'@'符号来进行变量命名并使用

<style lang="less" soped>
@myHeight:var(--my-Height,'100px')
.box{
  height: @myHeight;
  width: 500px;
  background-color: palevioletred;
}
</style>

在Sass中,使用'$'符号来进行变量命名并使用

<style lang="less" soped>
$myHeight:var(--my-Height,'100px')
.box{
  height: $myHeight;
  width: 500px;
}
</style>

自定义css属性 它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --My-color: black; ），由 var() 函数来获取值（比如： color: var(--My-color);）

element {
  // 定义一个变量时使用'--'开头
  --bg-color: brown;
  //使用一个局部变量时用var()函数包裹以表示一个合法的属性值
  background-color: var(--bg-color);
}

在 JavaScript 中获取或者修改 Less/Sass/CSS 变量和操作普通 CSS 属性是一样的：

// 获取一个 Dom 节点上的 CSS 变量
element.style.getPropertyValue("--my-var");

// 获取任意 Dom 节点上的 CSS 变量
getComputedStyle(element).getPropertyValue("--my-var");

// 修改一个 Dom 节点上的 CSS 变量
element.style.setProperty("--my-var", 'pink');