<!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. servlet中如何实现通过Spring实现对象的注入

    @WebServlet("/BaseServlet")public class BaseServlet extends HttpServlet { private static f ...

  2. 执行curl 提示curl: (35) SSL connect error

    安装acme证书时,执行如下 curl https://get.acme.sh | sh 提示如下报错: curl: (35) SSL connect error curl -v 跟踪时 发现 NSS ...

  3. js闭包讲解

    今日看到之前写的一段js代码,关于导航部分鼠标放上去变类,鼠标离开等效果 前端代码 <div class="con12"> <div class="le ...

  4. CentOS7中PPTP的配置

    最近做各种vpn,记录一下pptp的流程 1.准备 #yum install -y perl ppp iptables //centos默认安装了iptables和ppp   2.安装pptpd #y ...

  5. YEP_fpssynchoption

    帧率调节插件 ============================================================================Introduction===== ...

  6. 字王大藏经体v0.1概念版

    字王大藏经体v0.1概念版 zw-dzj 字王大藏经体v0.1概念版,是字王<中华大字库>2018版升级过程当中,在Github搜索资源时的意外惊喜. 大藏经为佛教经典的总集,简称为藏经. ...

  7. GridView用法

    首先,gridview是封装好的,直接在设计界面使用,基本不需要写代码: 1.绑定数据源 GridView最好与LinQDatasourse配合使用,相匹配绑定数据: 2.外观控制 整体控制 自动选择 ...

  8. c#基础之abstract和interface

    一.abstract abstract 的词义是“抽象”,它用来定义抽象类.抽象类不能被实例化只能被继承. 定义抽象类的格式如下:public abstract ClassName{……} 注意:只有 ...

  9. 新疆大学ACM-ICPC程序设计竞赛五月月赛（同步赛）A Red Rover

    题目链接 大概意思就是,找出一个字串,将其所有出现的地方替换成一个字母M后的长度len1,然后再加上这个字串的长度t_len得到一个新的长度len,求这个len最小等于多少. 当然,也可以不找这个串, ...

  10. 0x14哈希之兔子兔子

    参考链接:https://www.cnblogs.com/wyboooo/p/9813428.html 题目链接:https://www.acwing.com/problem/content/140/ ...