JS动态改变元素css样式

1 h5 的 classList

直接拿到样式数组classList，添加或修改样式

<a id="todo" class="todo">{
    
    {
    
     todo.key }}</a>

document.getElementById("todo").classList.add("done");

.todo{
    
    
  color: aqua;
}
.done{
    
    
  color:blue;
}

2 动态绑定

数据：

  valueList: [
    {
    
    
      key: '学习',
      check: true
    },
    {
    
    
      key: '游戏',
      check: false
    }
  ]

代码：
根据数据中 check 属性，动态选择某个样式

    <ul>
      <li v-for="todo in valueList" :key="todo.key">
        <a :class="{'todo': !todo.check, 'done': todo.check}">{
    
    {
    
     todo.key }}</a>
      </li>
    </ul>

.todo{
    
    
  color: aqua;
}
.done{
    
    
  color: black;
}

check 为 true 时，使用 done 样式
check 为 fasle 时，使用 todo样式