js 操作元素的 class 属性

使用 js 可以操作元素的 class 属性

 /*
    https://developer.mozilla.org/zh-CN/docs/web/api/element/classlist
   */

  let p = document.querySelector('p')

  // 重新赋值 class 属性
  p.className = 'class3'

  // 如果 class33 类值已存在, 则移除它, 否则添加它
  p.classList.toggle("class33");

  // add/remove visible, depending on test conditional, i less than 10
  p.classList.toggle("visible", i < 10 );

  // 在原有基础上增加多个 class 样式
  p.classList.add('class4', 'class5')

  // 移除某个 class
  p.classList.remove('class6', 'class61')

  // 替换某个 class
  p.classList.replace('class6', 'class5')

  // 判断是否包含某个 class
  console.log(p.classList.contains('class5'));