参考:https://blog.csdn.net/kissing7/article/details/8924112
对定义了id的html标签元素,js可以通过以下方法修改标签元素的css样式:
方法一:
对标签定义一个css样式:
document.getElementById("idname").style.display="none";
方法二:
对标签定义多个css样式:
var a = document.getElementById("idname");
with(a.style){
color = red;
font-size = 12px;
…
}
以下是js中document.getElementById("idname").stylexxx
属性可以定义的css属性对照
个人使用
<h4>选择播放站点</h4>
<div class="content_bottom">
<div
class="content_bottom_item"
v-for="(item, index) in playPoint"
:key="index"
@click="pointDivClick(index)"
>
<el-checkbox
:label="item"
v-model="point[index]"
size="medium"
style="color: #bbbb; font-size: 25px; font-weight: 900"
@click.native="SkipProgress($event)"
></el-checkbox>
</div>
</div>
// 点击方框选中站点和修改颜色
pointDivClick(index) {
this.point[index] = !this.point[index];
let icon = document.getElementById("id"+index);
console.log(icon.style.color);
if(icon.style.color == "" || icon.style.color == "blue"){
icon.style.color = "yellow";
}else {
icon.style.color = "blue";
}
},