<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>classList</title>

        <style type="text/css">

            .box{

                width: 100px;

                height: 100px;

                margin: 10px 0;

                background-color: blue;

            }

            .red{

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div class="box"></div>

        <div class="box"></div>

        <script type="text/javascript">
　　　　　　/*classList:获取class列表属性
　　　　　　　　length class的长度
　　　　　　　　add() 添加class方法
　　　　　　　　remove() 删除class方法
　　　　　　　　toggle() 切换class方法
　　　　　　*/

            var box = document.querySelectorAll('.box');

            /*for (var i = 0; i < box.length; i++) {

                box[i].isChecked = false;

                box[i].onclick = function () {

                    if (this.isChecked) {

                        this.className = 'box';

                    } else {

                        this.className = 'box red';

                    }

                    this.isChecked = !this.isChecked;

                }

            }*/

            /*for (var i = 0; i < box.length; i++) {

                box[i].isChecked = false;

                box[i].onclick = function () {

                    console.dir(this);

                    if (this.isChecked) {

                        this.classList.remove('red');

                    } else {

                        this.classList.add('red');

                    }

                    this.isChecked = !this.isChecked;

                }

            }*/

            // 三目写法

            for (var i = 0; i < box.length; i++) {

                box[i].isChecked = false;

                box[i].onclick = function () {

                    console.dir(this);

                    /*if (this.isChecked) {

                        this.classList.remove('red');

                    } else {

                        this.classList.add('red');

                    }*/

                    // this.isChecked ? this.classList.remove('red') : this.classList.add('red');

                    this.classList[this.isChecked?'remove':'add']('red');

                    this.isChecked = !this.isChecked;

                }

            }

        </script>

    </body>

    </html>

classList用法的更多相关文章

  1. js 控制 class 类名(classList) 和 自定义属性(dataset)

    classList 用法: const div = document.querySelector('div') div.classList.add('myclass') // 添加类名 div.cla ...

  2. position:sticky用法

    用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...

  3. C#中List<T>用法

    所属命名空间:System.Collections.Generic public classList<T> :IList<T>,ICollection<T>,IEn ...

  4. class的二般用法

    一般来说,class就是给一堆元素添加样式的,但是还有二般的用法,就是用来作为一个开关,来切换他的子孙元素的样式.举个例子: <ul> <li><span>1< ...

  5. js设置元素class方法小结及classList相关

        给DOM元素设置class是我们在项目中非常容易遇到的,网上的资料和总结也比较多,下面比较全面的整理一下,希望给到大家一些帮助!并引用两种成熟的classList的兼容方法 一.el.setA ...

  6. HTML DOM classList 属性

    页面DOM里的每个节点上都有一个classList对象,程序员可以使用里面的方法新增.删除.修改节点上的CSS类.使用classList,程序员还可以用它来判断某个节点是否被赋予了某个CSS类. 添加 ...

  7. JavaScript常用，继承，原生JavaScript实现classList

    原文链接:http://caibaojian.com/8-javascript-attention.html 基于 Class 的组件最佳实践(Class Based Components) 基于 C ...

  8. 学习前端的菜鸡对JS 的classList理解

    classList 在早期的时候要添加,删除类 需要用className去获取,然后通过正则表达式去判断这个类是否存在. 代码上去会有点麻烦,现在有了classList 就方便了很多. ——————— ...

  9. forEach，for in，for of循环的用法

    一.一般的遍历数组的方法: var array = [1,2,3,4,5,6,7]; for (var i = 0; i < array.length; i) { console.log(i,a ...

随机推荐

  1. linux下python3(Setup)项目

    新建setup.py文件 写入 from setuptools import setup setup( name='tickets', #定义你项目的名称 py_modules=['tickets', ...

  2. maven 控制台 打包

    maven打包方法1.打开cmd,进入到项目的根目录2.执行命令:mvn clean package等待结束.结束后到目录的target子目录中找jar文件即可

  3. git 本地提交代码到 github 远程库，没有弹框 github login

     git 本地提交代码到 github 远程库,没有弹框 github login:  原因: win10 有个凭据管理器,给保存了历史登陆用户名密码,导致无法切换用户. 解决办法: 删除历史登陆用户 ...

  4. Linux基础命令---ipcs显示进程通信

    ipcs ipcs指令用来显示进程间通信状况.“-i”选项允许指定特定的资源id.将只打印有关此id的信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUS ...

  5. redis 在 php 中的应用（Set篇）

    本文为我阅读了 redis参考手册 之后编写,注意 php_redis 和 redis-cli 的区别(主要是返回值类型和参数用法) Redis的 Set 是 string 类型的无序集合.集合成员是 ...

  6. flutter packages.

    connectivity This plugin allows Flutter apps to discover network connectivity and configure themselv ...

  7. kafka 控制台命令

    后台启动:bin/kafka-server-start.sh config/server.properties > /dev/null 2>&1 & 启动生产者:bin/k ...

  8. centos7救援模式--误删/usr/bin/恢复

    模拟场景 centos7 误删/usr/bin/等系统内置文件夹, 导致几百个内置命令丢失. 修复 rescue模式 vm模拟一遍(如果在物理机, 可通过U盘方式直接开机U盘进入选择救援模式, 方式通 ...

  9. Oracle中的位图索引和函数索引

    位图索引 同样的,先说是什么,再说为什么. 上篇我们说过BTREE索引是将数据表的索引列和行号排序后以树状形式存在磁盘中.那位图索引是什么样的呢? 现有如下日志表,有操作类型字段op_type,该字段 ...

  10. Unix系统的启动

    系统启动后: 第一个运行的进程是init 进程标识符为1. init派生一个getty.该进程负责打开终端端口,提供标准输入来源和标准输出.标准输出的去处,并且在屏幕上显示一个登录提示符 接下来执行/ ...