classList操作类属性-工具盒子


<div id="box" class="text">使用classlist属性设置class属性</div>

使用元素的classList属性可以访问或者添加、删除及修改元素的class属性

element.classList

使用classList属性访问class属性


let oDiv = document.querySelector('#box');
console.log(oDiv.classList);
// DOMTokenList ["text", value: "text"]

element.classList.add()

通过classList调用add()的方法可以添加一个或者多个class属性，多个用,隔开


// 添加fonts一个class属性
oDiv.classList.add('fonts');
// 同时添加fonts和red两个class属性
oDiv.classList.add('fonts', 'red');

element.classList.remove()

remove()移除，移除一个或者多个class属性，多个用,隔开


// 删除fonts一个class属性
oDiv.classList.remove('fonts');
// 点击删除fonts和red两个class属性
oDiv.onclick = function() {
    this.classList.remove('fonts', 'red');
}

element.classList.toggle()

在元素中切换类名。
toggle()中的第一个参数为必须参数，当元素中存在该指定的class属性时，将移除该class属性，反之就添加。
第二个参数为强制添加（参数为true时）或移除（参数为false时）第一个参数指定的class属性。


oDiv.classList.add('red');
oDiv.onclick = function() {
    // 切换class
    this.classList.toggle('fonts');
}

 // 强制移除一个class为fonts的属性 
oDiv.classList.toggle("fonts", false);
// 强制添加一个class为red的属性 
oDiv.classList.toggle("red", true);

element.classList.contains()

检测元素是否包含某个class 返回布尔值


// 检测元素是否包含类名为 e 的这个属性
let bool = oDiv.classList.contains('e');
console.log(bool);
// false

// 检测元素是否包含类名为 text 的这个属性
let bool = oDiv.classList.contains('text');
console.log(bool);
// true

模拟单选


<body>
    <div class="wrap">
        <h2>模拟单选</h2>
        <div class="option">
            <a href="javascript:;" class="checked">男</a>
            <a href="javascript:;">女</a>
            <a href="javascript:;">保密</a>
        </div>
    </div>
    <script>
        // 通过css选择器获取div中的所有a元素，返回一个类数组
        let oBtns = document.querySelectorAll('.option a');

        // console.log(oBtns.length);
        // 
        for (let i = 0; i < oBtns.length; i++) {
            // console.log(i);

            // oBtns获取的是一组a的类数组，既然是伪数组，就可以使用下标去获取某一个值
            // 使用循环的数值，从0开始的 i 值，每一次拿到的都是不同的a，不同的添加事件
            oBtns[i].onclick = function() {
                // 每次点击时先消除其他元素上的class
                for (let j = 0; j < oBtns.length; j++) {
                    oBtns[j].classList.remove('checked');
                }
                // 然后给点击的元素添加上class
                this.classList.add('checked');
            }
        }
    </script>
</body>

DEMO展示

模拟复选


<body>
    <div class="wrap">
        <h2>模拟复选</h2>
        <div class="option">
            <a href="javascript:;" class="checked">油桃</a>
            <a href="javascript:;">菠萝</a>
            <a href="javascript:;">葡萄</a>
        </div>
    </div>
    <script>
        let oBtns = document.querySelectorAll('.option a');

        // console.log(oBtns.length);
        for (let i = 0; i < oBtns.length; i++) {
            oBtns[i].onclick = function() {
                this.classList.toggle('checked');
            }
        }
    </script>
</body>

DEMO展示