27、 classList 属性

最新推荐文章于 2023-04-03 17:38:31 发布

是瑞瑞小甜心

最新推荐文章于 2023-04-03 17:38:31 发布

阅读量323

点赞数

分类专栏： WebAPI 文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_45998542/article/details/122013674

版权

WebAPI 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

27、 classList 属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是ie10以上版本支持。

该属性用于在元素中添加，移除及切换 CSS 类。有以下方法

添加类：

element.classList.add（’类名’）；

focus.classList.add('current');

移除类：

element.classList.remove（’类名’）;

focus.classList.remove('current');

切换类：

element.classList.toggle（’类名’）;

focus.classList.toggle('current');

注意:以上方法里面，所有类名都不带点

<body>
    <div class="one two"></div>
    <button>开关灯</button>
    <script>
        // classList 返回元素的类名
        var div = document.querySelector('div');
        // console.log(div.classList[1]);
        // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
        div.classList.add('three');
        // 2. 删除类名
        div.classList.remove('one');
        // 3. 切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            document.body.classList.toggle('bg');
        })
    </script>
</body>