Vue

<!--普通style-->

1、演示HTML主体结构

<div class="header" ref="mycolor" @click="func">

<div class="header-info"></div>

</div>

2、首先作用区域范围内设置“CSS变量”

<style>/*在header区域内设置 CSS变量--bccolor */

.header {

--bcColor: #ffffff;

}

/*在子元素中使用该变量*/

.header-info

background-color :var(--bcColor);

</style>

3、在JS中通过setProperty()方法修改“--bcColor”的值，从而间接改变对应子元素的（background-color）背景颜色

<script>

methods:{

func () {

this.$refs.mycolor.style.setProperty("--bcColor",'white');

}

}

</script>

 

另一种方式实现动态改变style中元素背景图

 

例：项目中循环从接口拿来的背景图片路径