css 动态设定div背景颜色

主要方法：
一、css中无background-color初始值
二、css中有background-color初始值，对于一个属性值在多处被使用，该方法很有效

主要步骤：

1. 为div绑定id

   <template v-if="i in (1, 2, 3, 4, 5)">
   	<div :id=`step-${i}` class="container"></div>
   </template>
   

   注：id对应css用样式选择符“#”，而class对应样式选择符“.”（英文半角）

2. 因为id具有唯一性，在一个网页中只能调用一次。所以通过div的id获取元素

   modyfyStyle(idx = 0) {
   	const box = document.getElementById(`step-${idx}`)
   	if (!box) {
   		return
   	}
   	// 方法一：css中无background-color初始值
   	box.style.backgroundColor = 'red'
   	// 方法二：css中有background-color初始值
   	box.style.setProperty('--container-background-color', 'red')
   }
   

   css内容（若有类似此处代码，则参考方法二）：

   .container {
   	background-color: var(--container-background-color)
   }
   

   注：var()函数用于插入自定义的属性值，用法为var(property-name， property-value)。其中，property-name必填，为自定义属性的名称，必需以–开头。property-value为选填。

   传送门：
   document对象
   var函数