classList类名操作

m0_63400611

已于 2022-05-18 16:08:52 修改

阅读量668

点赞数

分类专栏： js 文章标签： javascript vue.js elementui

于 2022-03-05 22:44:49 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123302846

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

本文介绍了如何通过JavaScript的classList API高效地对HTML元素的类名进行增删改操作，如添加'three'，移除'one'，以及切换body的背景样式。通过<button>元素控制<body>的'bg'类的添加和删除。

摘要由CSDN通过智能技术生成

classList类名操作可以更加方便的对元素的类名进行增加,删除和切换

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .bg {
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="one two"></div>
    <button>开关灯</button>
    <script>
        //classList 返回元素的类名
        var div = document.querySelector('div');
        console.log(div.classList[1]);//返回div的第二个类名(索引号为1)
        //添加类名 在后面追加类名并且不会覆盖之前的类名 前面不需要'.'
        div.classList.add('three');
        //删除类名
        div.classList.remove('one');
        //切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>
</body>
</html>

使用document.body.classList.toggle('bg');的时候,当前元素有'bg'这个类名时删除这个类名,反之没有这个类名则添加这个类名到classList的后面