classList类名操作

最新推荐文章于 2024-03-24 00:30:44 发布

「已注销」

最新推荐文章于 2024-03-24 00:30:44 发布

阅读量811

点赞数 1

本文链接：https://blog.csdn.net/m0_57835615/article/details/117431706

版权

classList 属性可以返回元素的类名（只读）。

语法格式：

element.classList

示例：

    <div class="one two three"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.classList);
    </script>

控制台输出了一个 DOMTokenList 对象，该对象包含了元素的全部属性，我们可以通过索引来读取元素的类名。

例如：

    <div class="one two three"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.classList[1]);
    </script>

控制台输出：

此外，我们可以通过length属性读取元素类的个数。

示例：

    <div class="one two three"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.classList.length);
    </script>

控制台输出：

classList属性的方法：

1. 使用add( )方法添加类

语法格式：

        element.classList.add('class1','class2',...'classn');

示例：

    <div></div>
    <script>
        var div = document.querySelector('div');
        div.classList.add('one','two');
        console.log(div.classList);
    </script>

控制台输出：

通过add( )方法，为div添加了两个类（one和two）。

2.使用remove( )方法移除类

语法格式：

        element.classList.remove('类名');

示例：

    <div class="one two"></div>
    <script>
        var div = document.querySelector('div');
        div.classList.remove('one');
        console.log(div.classList);
    </script>

控制台输出：

通过remove( )方法，为div移除了一个类（one）。

3.使用contains( )方法检测类

语法格式：

        element.classList.contains('类名');

返回布尔值，若元素包含指定的类，则返回true，否则返回false。

示例：

    <div class="one two"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.classList.contains('one'));
    </script>

控制台输出：

div包含类one，故返回true。

4.使用item( )方法返回索引值对应的类名

语法格式：

        element.classList.item(索引值);

如果索引值在区间范围外则返回 null

示例：

    <div class="one two"></div>
    <script>
        var div = document.querySelector('div');
        console.log(div.classList.item(0));
    </script>

控制台输出：

返回了div的第一个类名。

5.toggle( )方法切换类名

语法格式：

        element.classList.toggle('类名');

如果该类名存在，则在该元素移除类名。如果该类名不存在，则在元素中添加类名。

示例：

（1）移除类

    <div class="three"></div>
    <script>
        var div = document.querySelector('div');
        div.classList.toggle('three');
        console.log(div.classList);
    </script>

控制台输出：

（2）添加类

    <div></div>
    <script>
        var div = document.querySelector('div');
        div.classList.toggle('three');
        console.log(div.classList);
    </script>

控制台输出：