WebAPI中className与classList的区别

2024-01-27 15:48:40

className

webapi中通过className更改元素样式

在style标签中重新定义一个新的样式
在js中直接引用：获取的元素.className=’’;

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .size{
      font-size: 30px;
    }
  </style>
<body>
  <div class="box">123</div>
</body>
<script>
 const box= document.querySelector('.box') //获取dom元素
 box.onclick=function(){
   this.className='size'
 }
</script>

注意：

如果样式修改较多，可以采取操作类名方式更改元素样式。
class因为是个保留字，因此使用className来操作元素类名属性
className 会直接更改元素的类名，会覆盖原先的类名。

ClassList

element.classList.add() 增加类
element.classList.remove() 删除类
element.classList.toggle() 切换类
element.classList.contains() 判断是否包含某个类，返回true/false

  <style>
    .box{
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .size{
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div class="box">123</div>
</body>
<script>
 const box= document.querySelector('.box') //获取dom元素
box.classList.add('size')
</script>

注意:

classList不会覆盖类名，在原有的类名上添加上另一个类名