HTML 基础实现添加、删除、切换类

最新推荐文章于 2022-09-13 19:15:56 发布

roadmaps

最新推荐文章于 2022-09-13 19:15:56 发布

阅读量602

点赞数 1

分类专栏： HTML 学习文章标签： html5 html web css

本文链接：https://blog.csdn.net/qaz1128123/article/details/118546866

版权

HTML 学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

闲下来的时候也要扎实一下基础能力。

页面布局

<div id="class"></div>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>

在这里插入图片描述

给元素添加一个类

ie 11 add() 不支持多个参数

ele.classList.add("class-name");

// 添加多个，ie11 不支持多个
ele.classList.add("another", "another1", "another2");

<html>
  <head>
    <style>
      .block {
        width: 100px;
        height: 100px;
        margin: 0 auto;
        background: yellow;
      }
      #btns {
        margin: 10px auto;
        text-align: center;
      }
      .another {
        background: red;
      }
    </style>
  </head>
  <body>
    <div id="class" class="block"></div>
    <div id="btns">
      <button
        class="btn"
        data-type="add"
        style="background-color: #63b3ed; border: none; color: #fff; cursor: pointer; padding: .5rem 1rem;"
      >
        添加类
      </button>
      <button
        class="btn"
        data-type="del"
        style="background-color: #63b3ed; border: none; color: #fff; cursor: pointer; padding: .5rem 1rem;"
      >
        删除类
      </button>
      <button
        class="btn"
        data-type="tagger"
        style="background-color: #63b3ed; border: none; color: #fff; cursor: pointer; padding: .5rem 1rem;"
      >
        切换类
      </button>
    </div>
  </body>
  <script>
    const btns = document.getElementById("btns");

    const ele = document.getElementById("class");

    btns.addEventListener("click", (e) => {
      let { target = {} } = e;
      let type = target.getAttribute("data-type");
      console.log(type);
      if (type === "add") {
        ele.classList.add("another");
      }
      if (type === "del") {
        ele.classList.remove("another");
      }
      if (type === "tagger") {
        ele.classList.toggle("another");
      }
    });
  </script>
</html>

不常用的 getAttribute

Element.getAttribute()

let attribute = element.getAttribute(attribute)

attribute 一个包含 attributeName 属性值的字符串

attributeName 需要获取的属性值的属性名称

参考链接

roadmaps

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML 基础实现添加、删除、切换类

闲下来的时候也要扎实一下基础能力。页面布局<div id="class"></div><button>添加类</button><button>删除类</button><button>切换类</button>给元素添加一个类ie 11 add() 不支持多个参数ele.classList.add("class-name");// 添加多个，ie11 不支持多个ele.classList.
复制链接

扫一扫