<!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. ELK+Filebeat 集中式日志解决方案详解

    链接:https://www.ibm.com/developerworks/cn/opensource/os-cn-elk-filebeat/index.html?ca=drs- ELK Stack ...

  2. Nodejs使用robot操作鼠标键盘

    1.安装robotjs库 前提是配置了cnpm cnpm i robotjs -g   2.如果报错VCBuild.exe,如下可以安装windows-tool MSBUILD : error MSB ...

  3. Grid move

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  4. A Simple Nim (SG打表找规律)

    题意:有n堆石子,每次可以将其中一堆分为数量不为0的3堆,或者从其中一堆中拿走若干个,最终拿完的那个人赢. 思路:直接暴力SG状态,然后找出其中的规律,异或一下每一堆的状态就可以了. #include ...

  5. 使用StringEscapeUtils转义、反转义字符串

    使用commmons-lang.jar中的字符串转义工具类org.apache.commons.lang.StringEscapeUtils转义.反转义字符串,支持CSV.HTML.JAVA.Java ...

  6. Android-Gradle(三)

    依赖管理是Gradle最闪耀的地方,最好的情景是,你仅仅只需添加一行代码在你的build文件,Gradle会自动从远程仓库为你下载相关的jar包,并且保证你能够正确使用它们.Gradle甚至可以为你做 ...

  7. 【Spark-SQL学习之三】 UDF、UDAF、开窗函数

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk1.8 scala-2.10.4(依赖jdk1.8) spark ...

  8. 转载-《Python学习手册》读书笔记

    转载-<Python学习手册>读书笔记 http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html

  9. 含服务端，客户端，数据库的注册/登录/聊天/在线/离线查看的聊天demo

    用websocket,mysql,node的写了一个简单聊天的demo 实现了: 注册,登陆功能: 聊天信息广播: 在线/离线状态的查看: 服务端: 主要引用http,fs,mysql,socket. ...

  10. bzoj 3597 [Scoi2014] 方伯伯运椰子 - 费用流 - 二分答案

    题目传送门 传送门 题目大意 给定一个费用流,每条边有一个初始流量$c_i$和单位流量费用$d_i$,增加一条边的1单位的流量需要花费$b_i$的代价而减少一条边的1单位的流量需要花费$a_i$的代价 ...