js通过标签元素id，用document.getElementById().style设置标签元素的css属性

参考：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";
  }
},