请收下这炫技的CSS技巧最近项目中封装组件的时候，通过JavaScript传参给CSS，CSS拿到变量之后，动态赋值改变

这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战

前言

在线音乐戳我呀！
音乐博客源码上线啦！
前几篇讲了Docker的安装部署，操作算是比较简单的。（入门级）
最近项目中封装组件的时候，通过JavaScript传参给CSS，CSS拿到变量之后，动态赋值改变样式。
接下来将分享JavaScript如何传参到Css，去控制CSS样式，一五一十盘出。
Are you ready ？

有幸领会到李白所所言的“飞流直下三千尺” ~

一、存在问题

想要通过JS去控制CSS的样式。

下面我们分析为什么会存在该想法。

二、还原场景

一个百分比组件，根据传入的大小，组件的宽高显示不同。

三、进行分析

因为宽高都是写在css中，但我想通过传入的数据参数控制宽高，那就要JS去控制CSS。

那我们有两种方案：

我可以通过计算属性computed去根据参数，对变量进行赋值，然后绑定在:style上，在style中使用var()获取我们在行内设置的数据即可。
还可以通过传入的参数，获取元素，有个setProperty方法去用于设置一个新的 CSS 属性，同时也可以修改 CSS 声明块中已存在的属性。

四、解决方案

有两种方案，使用var()、setProperty()

如下：

4.1 用var()

<template>
  <div class="box" :style="styleVar">
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  computed: {
    styleVar() {
      return {
        '--box-height': this.height + 'px'
      }
    }
  },
}
</script>
<style scoped>
.box {
  height: var(--box-height);
}
</style>

4.2 setProperty()

<template>
  <div class="box" ref="box">
      <span></span>
  </div>
</template>
<script>
export default {
  props: {
    height: {
      type: Number,
      default: 54,
    },
  },
  mounted() {
    this.$refs.box.style.setProperty('--box-height', this.heigt / 200 + 'rem')
  },
}
</script>
<style scoped lang="less">
@height: var(--box-height)	// 定义变量
.box {
  height: @height;
}
</style>

五、盲区

5.1 一个JS变量不能在less被两个变量定义

@height: var(--height);
@height2: var(--height);

// 一个JS变量不能在less被两个变量定义

5.2 var()函数不能进行运算

着重看cmd的报错信息。

@height: var(--height) / 2;

// var()函数不能进行运算

六、Tips

style中使用var不能使用运算，比如height：-var(--heigh)，这里使用了减法。

七、小知识

setProperty() 方法接口为一个声明了CSS样式的对象设置一个新的值。

7.1 语法

style.setProperty(propertyName, value, priority);

7.2 参数

propertyName ：是一个 DOMString ，代表被更改的CSS属性。
value可选：是一个 DOMString ，含有新的属性值。如果没有指定, 则当作空字符串。
- 注意: value 不能包含 "!important" 那个应该使用 priority 参数。
priority：可选是一个 DOMString 允许设置 "important" CSS 优先级。如果没有指定, 则当作空字符串。