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

声明变量颜色 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>