classList

classList 属性

　　classList 属性是 H5 新增的一个属性，返回元素的类型。但是 IE10 以上版本支持。

　　该属性用于在元素中添加、移除以及切换 CSS 类。

　　添加：

　　　　element.classList.add( ' 类名 ' )。

　　　　focus.classList.add('current')。

　　　　追加类名不会覆盖以前的类名，追加的时候类名前面

　　移除：

　　　　element.classList.remove( ' 类名 ' )。

　　　　focus.classList.remove('current')。

　　切换：

　　　　element.classList.toggle('  类名 ')。

　　　　如果当前元素有这个类名，那么就把这个类名给移除；如果当前元素没有这个类名，那么就添加这个类名。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .div1 {
      width: 200px;
    }

    .div2 {
      height: 300px;
    }

    .div3 {
      background-color: cyan;
    }
  </style>
</head>

<body>
  <div></div>
  <button>按钮</button>
</body>
<script>
  let div = document.querySelector('div')
  div.classList.add('div1')
  div.classList.add('div2')
  div.classList.add('div3')
  div.classList.remove('div1')
  document.querySelector('button').onclick = () => {
    div.classList.toggle('box')
  }
</script>

</html>

 

posted @ 2022-04-16 20:25  守鹤  阅读(400)  评论(0)    收藏  举报