<!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. C# string 常用功能的方法扩展

    #region Usings using System; using System.Text; using System.Data; using System.Data.SqlClient; usin ...

  2. python精进之路1---基础数据类型

    python精进之路1---基本数据类型 python的基本数据类型如上图,重点需要掌握字符串.列表和字典. 一.int.float类型 int主要是用于整数类型计算,float主要用于小数. int ...

  3. jQuery常见用法

    jQuery有好多版本本,无法同时引用两个不同的版本,容易造成混乱,用哪一个,调用哪一个.\ jQuery引用到<head></head>中,页面加载时就需要特效调用这些方法. ...

  4. C博客作业06--结构体&文件

    1.本章学习总结 1.1思维导图 1.2本章学习体会 学习了结构和文件,又是懵懵的课了,我的天啊.结构还好,题目集一出就做了,不是很难,感觉掌握的还可以,不过这只是感觉而已,等到真正来写大作业的时候又 ...

  5. PAT (Basic Level) Practice （中文）1002 写出这个数 （20 分)

    题目链接:https://pintia.cn/problem-sets/994805260223102976/problems/994805324509200384 #include <iost ...

  6. Linux的DNS配置3-多域

    1.实验目的 现要求在两个局域网中分别搭建各自的DNS服务器,并通过相关设置,使得两个DNS服务器能相互解析 2.实验拓扑 3.实验分析 要使两个不同网络的DNS服务器能相互访问,需要额外假设一台DN ...

  7. js判断终端以及APP应用判断

    **第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端.代码如下:** <script type="text/javascript"& ...

  8. win7有多条隧道适配器(isatap、teredo、6to4)的原因及关闭方法

    问题:sdp协商时,带有IPV6的信息,需要将IPV6相关信息去掉 原因:网卡启用了ipv6通道 解决:关闭IPv6数据接口 netsh interface isatap set state disa ...

  9. gitlab备份

    #!/bin/bash backup_date=`date "+%Y_%m_%d"` delete_date=`date +%Y_%m_%d -d "7 days ago ...

  10. 解析docker中的环境变量使用和常见问题解决

    docker容器中的环境变量 docker可以为容器配置环境变量.配置的途径有两种: 在制作镜像时,通过ENV命令为镜像增加环境变量.在容器启动时使用该环境变量. 在容器启动时候,通过参数配置环境变量 ...