用js代码添加标签类名

210 阅读1分钟
  • 给标签添加类名的方式
    (1)className 一般只添加一个类名时使用
 <div id="box1">1</div>
  <div id="box"></div>
  <script>
    let box1 = document.querySelector("#box1")
    let box = document.querySelector("#box")
    // 只添加一个
    box1.className = 'box2'
    // 添加多个时,用空格隔开再写类名
    box.className = 'box3 box4'
  </script>

image.png

(2) classList.add() 一般添加多个类时使用

  <div id="box1">1</div>
  <div id="box"></div>
  <script>
    let box1 = document.querySelector("#box1")
    let box = document.querySelector("#box")
    // 只添加一个
    box1.classList.add("box1")
    // 添加多个时,用空格隔开再写类名
  box.classList.add("box1")
  box.classList.add("box1")//添加两次一样的类名只会有一个
  box.classList.add("box2")
  </script>

image.png