classList操作类名样式

<button>添加一个字体大小样式</button>
  <button class="second">移除一个字体大小样式</button>
  <button>切换一个字体大小样式</button>
  <button>判断元素是否有某个样式</button>
  <p class="red">我是百变p元素</p>
  <script>
    // 获取元素
    let p = document.querySelector('p')

    //四种选取方式
    let btn1 = document.querySelector('button')
    let btn2 = document.querySelector('.second')
    let btn3 = document.querySelector('button:nth-of-type(3)')
    let btn4 = document.querySelectorAll('button')[3]

    // 单击事件
    btn1.addEventListener('click', function () {
      //classList.add:在已有的基础上新增一个新的样式类名，‘不影响’元素之前已有的样式
      // p.classList.add('新样式类名')
      //括号里面的类名不用再加.标记了，因为它只能对类名样式进行处理
      p.classList.add('size50', 'underline') //多样式就用逗号单独分隔开
    })

    btn2.addEventListener('click', function () {
      //classList.remove:移除指定名称样式，不影响元素其他的样式类名
      p.classList.remove('size50')
    })

    btn3.addEventListener('click', function () {
      //classList.toggle:切换元素的样式，如果没有就添加，如果有就移除
      p.classList.toggle('size50')
    })

    btn4.addEventListener('click', function () {
      //classList.contains:判断当前元素是否包含某个指定名称的样式，如果有就返回true，如果没有返回false
      let flag = p.classList.contains('size50')
      console.log(flag);
    })
  </script>