dataset与classlist的使用案例

• html最初状态
  ```html

  <!-- 自定义属性：sno -->

  <div class="stu bgc hw" data-sno="0001">学生信息</div>

- css
```css
.bgc {
        background-color: seagreen;
      }
      .bgc2 {
        background-color: slateblue;
      }
      .fgc1 {
        color: seashell;
      }
      .hw {
        height: 20rem;
        width: 30rem;
      }

• 效果
  

• 写入javascript

      const stu = document.querySelector(".stu");
      // 将自定义属性sno的值写入div内容
      stu.textContent += stu.dataset.sno;
      //   添加类
      stu.classList.add("fgc1");
      //   使用类bgc2替换类bgc
      stu.classList.replace("bgc", "bgc2");
      //   删除类hw
      stu.classList.remove("hw");

• 效果