主要方法:
一、css中无background-color初始值
二、css中有background-color初始值,对于一个属性值在多处被使用,该方法很有效
主要步骤:
-
为div绑定id
<template v-if="i in (1, 2, 3, 4, 5)"> <div :id=`step-${i}` class="container"></div> </template>
注:id对应css用样式选择符“#”,而class对应样式选择符“.”(英文半角)
-
因为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函数