CSS中 通过自定义属性（变量）动态修改元素样式（以 el-input 为例）

传送门：CSS中 自定义属性（变量）详解

1. 需求及解决方案

需求：通常我们动态修改 div 元素的样式，使用 :style 和 :class 即可；但想要动态修改 如：Element-ui 中输入框（input）组件的字体颜色时，由于 el-input 的样式嵌套很深，需要修改的实际是 .el-input__inner 这个样式类的 color，但我们在 HTML 中没法直接拿到这个类名。

解决方案及相关步骤：通过 CSS 中的变量（自定义属性） 结合样式穿透实现；

为对应的 CSS 类引入变量 --inputColor；

/deep/ .el-input__inner {
  color: var(--inputColor); // 使用css变量 注意变量前需要加 --
}
1
2
3

声明变量颜色 colorVal 如： red，并在需要修改的地方，为 --inputColor 变量赋值；

data (){
	return {
		colorVal: 'red',
	}
}
1
2
3
4
5

<el-input v-model="inputVal" :style="{ '--inputColor': colorVal}">el-input>
1

最后，动态 js 修改 colorVal 即可；

this.colorVal = '#b2fdd2';
1

注意：–inputColor 是 css 变量，帮助引导的，colorVal 才是设置的样式值;

2. 完整代码及效果

<template>
  <div class="home">
    <el-input
      :style="{ '--inputColor': colorVal}" 
      v-model="inputVal"
      @input="valInput">
    el-input>
  div>
template>

<script>
export default {
  data() {
    return {
      inputVal:'',
      colorVal: 'red',
    };
  },
  methods:{
    valInput(){
      let r = Math.floor(Math.random() * 256),
          g = Math.floor(Math.random() * 256),
          b = Math.floor(Math.random() * 256);
      // 设置随机色
      this.colorVal = '#' + r.toString(16) + g.toString(16) + b.toString(16);
    }
  },
};
script>

<style lang="scss" scoped>
.home{
  width: 200px;
  ::v-deep .el-input__inner {
    color: var(--inputColor);
  }
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

效果：