DOM操作元素类名：“.className”、“classList”的用法

最新推荐文章于 2024-05-02 18:12:22 发布

陌一一

最新推荐文章于 2024-05-02 18:12:22 发布

阅读量1.5k

点赞数 5

分类专栏： web前端开发文章标签： javascript html 前端开发语言 web

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127406685

版权

web前端开发专栏收录该内容

281 篇文章 15 订阅

订阅专栏

1、 “.className”：获取标签里class选择器里的类名

● 通过“对象.className”来使用这个方法

● 结果是这个标签的class类名

● 可以通过重新赋值的方式更改类名和删除类名

● 用法：

○ 获取类名

<body>
    <div id="box" class="item item1 item2"></div>
    <script>
        //.className获取class类名
        console.log(box.className)
    </script>
</body>

结果：

○ 修改类名和删除类名：也可以修改这个类名，通过重新赋值的方式：

box.className = "item item1"

● 缺点是：如果你本身有一个item2这样的类名了，但是你赋值的时候又加上了一个item2，它不会给你去重，如下所示：

<body>
    <div id="box" class="item item1 item2"></div>
    <script>
        //.className获取class类名
        box.className = "item item2 item2"
        console.log(box.className)
    </script>
</body>

结果：结果有两个item2，就不好设置属性了，下面有一种可以去重的方法介绍：classList

2、classList属性（可以去重类名）

● 用法：对象.classList

<body>
    <div id="box" class="item item2 item2"></div>
    <script>
        //classList:获取class类名，并去重
        console.log(box.classList)
    </script>
</body>

结果：结果是一个数组，去重后结果只剩下item和一个item2了