• html最初状态
    ```html

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

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

  2. - css
  3. ```css
  4. .bgc {
  5.         background-color: seagreen;
  6.       }
  7.       .bgc2 {
  8.         background-color: slateblue;
  9.       }
  10.       .fgc1 {
  11.         color: seashell;
  12.       }
  13.       .hw {
  14.         height: 20rem;
  15.         width: 30rem;
  16.       }

  • 效果

  • 写入javascript

  1.       const stu = document.querySelector(".stu");
  2.       // 将自定义属性sno的值写入div内容
  3.       stu.textContent += stu.dataset.sno;
  5.       //   添加类
  6.       stu.classList.add("fgc1");
  7.       //   使用类bgc2替换类bgc
  8.       stu.classList.replace("bgc", "bgc2");
  9.       //   删除类hw
  10.       stu.classList.remove("hw");
  • 效果

更多相关文章

  1. CSS伪类选择器、box-sizing属性、常用单位、媒体查询
  2. 1. 实例演示绝对定位与固定定位(完成课堂上的模态框案例) 2. 制
  3. js语法：解构赋值、dom元素的增删改、dataset,classList对象的使用
  4. 1. box-sizing属性解决了什么问题?2. 伪类选择器的参数 an+b的经
  5. 注册表单选，择器权重的计算过程，上下文选择器
  6. PHP获取文件属性的最简单方法
  7. HTML常用标签的用法示例
  8. 1.模态框 2.flex布局 3.grid属性
  9. CSS盒模型常用属性,单位，选择器

随机推荐

  1. 制作动态表格（最好的方法）
  2. Android短彩信源码解析-短信发送流程（三）
  3. android app启动就闪退怎么办？
  4. 如何设计数据库模型来记录客户的历史活动
  5. Android百度地图定位定到了海里，定到了非
  6. android插件化-apkplug中以监听方式获取O
  7. 关于 android.support.v7.widget.ListPop
  8. E/JavaBinder：FAILED BINDER TRANSACTION
  9. Android:无法在同一部手机上执行通过Linu
  10. [android基础]《疯狂android讲义》重点整