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

news2024/11/15 8:50:54

传送门：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变量 注意变量前需要加 --
}

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

data (){
	return {
		colorVal: 'red',
	}
}

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

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

this.colorVal = '#b2fdd2';

注意：–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>