样式操作之className 和 classList 使用的区别

className的特点：

语法：元素.className = '类名'

注意：利用className会存在一个比较大的弊端，因为className是使用新值换旧值,会直接更换原有的类名,会覆盖以前的类名

classList的特点：

classList解决了className 会覆盖原有类名的问题，因为我们可以通过classList方式追加，删除更换类名

追加一个类：元素.classList.add('类名')
删除一个类：元素.classList.remove ('类名')
切换一个类：元素.classList.toggle('类名')
检测一个类是否存在：元素.classList.contains('类名')

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

    .size50 {
      font-size: 50px;
    }

    .underline {
      text-decoration: underline;
    }
  </style>
</head>

<body>
  <button>添加一个字体大小样式</button>
  <button>移除一个字体大小样式</button>
  <button>切换一个字体大小样式</button>
  <button>判断元素是否有某个样式</button>
  <p class="red">我是百变p元素</p>

  <script>
  1.获取元素
    let btn1 = document.querySelectorAll('button')[0]
    let btn2 = document.querySelectorAll('button')[1]
    let btn3 = document.querySelectorAll('button')[2]
    let btn4 = document.querySelectorAll('button')[3]
    let p = document.querySelector('p')
    
    //追加一个类
    btn1.addEventListener('click', function () {
      p.classList.add('size50', 'underline')
    })
    
    //移除一个类
    btn2.addEventListener('click', function () {
      p.classList.remove('size50')
    })
    
    //更换一个类
    btn3.addEventListener('click', function () {
      p.classList.toggle('size50')
    })
    
    //检测一个类是否存在
    btn4.addEventListener('click', function () {
      let bullin = p.classList.contains('size50')
      console.log(bullin);
    })


  </script>
</body>

className 和 classList 使用上的区别

样式操作之className 和 classList 使用的区别

className的特点：

classList的特点：