JAVA高级面试进阶训练营视频教程

admin · 发表于 2021-6-7 22:03:28

本文主要重点

classList 有4个方法

// add("class名字"); 给元素中添加一个class,例如 add("checked")

// remove("class名字"); 删除class

// contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false

// toggle() 切换class,如果元素有这个class,我们就删掉，否则就加上class

效果图：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复选框</title>
    <style>
        .options>a {
            color: #333;
            margin: 20px;
        }
        
        .checked {
            color: red!important;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="options">
            <a href="javascript:;" class="checked">语文</a>
            <a href="javascript:;">数学</a>
            <a href="javascript:;">英语</a>
        </div>
    </div>
    <script>
        //目标是：复选框效果，样式比较简单，点击字体变颜色即可
        var list = document.querySelectorAll(".options a"); //先获取所有标签
        console.log(list); //类数组
        // list.onclick = function() { //一组元素不能直接操作，只能通过下标操作，哪怕这组元素只有一个

        // }
        for (var i = 0; i < list.length; i++) {

            list.onclick = function() {

                //第一种方法，判断有没有这个类名，但是如果是多个类名尼
                // if (this.className == 'checked') { //如果包含这个class,点击就去掉class
                //     this.className = '';
                // } else { //否则取消
                //     this.className = 'checked';
                // }

                //第二种方法：classList
                //console.log(this.classList);
                //classList  有4个方法
                // add("class名字");   给元素中添加一个class,例如  add("checked")             
                // remove("class名字");  删除class            
                // contains("class名字") ;判断元素的classList是否包含这个class，包含返回true,否则返回false                    
                // toggle()   切换class,如果元素有这个class,我们就删掉，否则就加上class


                // if (this.classList.contains("checked")) { //如果classList包含这个class,点击就删掉class，否则添加class
                //     this.classList.remove("checked");
                // } else { //否则取消
                //     this.classList.add("checked");
                // }

                // 第三种方法  toggle
                this.classList.toggle('checked');

            }
        }
    </script>
</body>

</html>

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶训练营视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万大数据入门到精通学习路线	年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

JAVA高级面试进阶训练营视频教程

Java架构师系统进阶VIP课程

原生js开发简单复选框，点击变颜色，再点击取消颜色，三种解决方法