<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>addClassName , removeClassName</title>

    </head>

    <body>

        <div id="div1" class="bb">

            div1

        </div>

        <div id="div2" class="box dd bb">

            div2

        </div>

        <script type="text/javascript">

            var oDiv1 = document.getElementById("div1");

            var oDiv2 = document.getElementById("div2");

            addClass(oDiv1 , 'box');

            removeClass(oDiv2,'box');

            function addClass(obj,className){

                //如果原来没有class

                if(obj.className == ""){

                    obj.className = className;

                }else{

                    var _index = classIndexOf(obj,className);

                    //如果原来没有这个新加的class

                    if(_index == -1){

                        obj.className += " " + className;

                    }

                }

            }

            function removeClass(obj,className){

                //如果以前的元素不为空

                if(obj.className != ""){

                    var arrClassName = obj.className.split(" ");

                    var _index = classIndexOf(obj,className);

                    //如果存在要删除的class

                    if(_index != -1){

                        arrClassName.splice(_index,1);

                    }

                    obj.className = arrClassName.join(" ");

                }

            }

            //检验是否包含有某一个class

            function classIndexOf(obj,v){

                var arrClassName = obj.className.split(" ");

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

                    if(arrClassName[i] == v){

                        return i;

                    }

                }

                return -1;

            }

        </script>

    </body>

</html>

js学习笔记20----addClass，removeClass函数封装的更多相关文章

  1. js学习笔记之自调用函数、闭包、原型链

     自调用函数 var name = 'world!'; // console.log(typeof name) (function () { console.log(this.name, name, ...

  2. JS学习笔记（三）函数

    js中的方法名一般都是首字母小写,其余单词首字母大写的规范. 声明 function 函数名(参数列表) { // 函数体 return 返回值; } 调用 函数名(); (js中花括号喜欢用这种方式 ...

  3. 【JS学习笔记】关于function函数

    函数的基本格式 function 函数名() { 代码: } 函数的定义和调用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...

  4. JS学习笔记 - fgm练习 2-5 - 函数传参 设置div样式

    练习地址:http://www.fgm.cc/learn/lesson2/05.html <script> window.onload = function(){ var oDiv = d ...

  5. WebGL three.js学习笔记 使用粒子系统模拟时空隧道（虫洞）

    WebGL three.js学习笔记 使用粒子系统模拟时空隧道 本例的运行结果如图: 时空隧道demo演示 Demo地址:https://nsytsqdtn.github.io/demo/sprite ...

  6. JS 学习笔记--9---变量-作用域-内存相关

    JS 中变量和其它语言中变量最大的区别就是,JS 是松散型语言,决定了它只是在某一个特定时间保存某一特定的值的一个名字而已.由于在定义变量的时候不需要显示规定必须保存某种类型的值,故变量的值以及保存的 ...

  7. WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

    WebGL学习----Three.js学习笔记(5) 点击查看demo演示 Demo地址:https://nsytsqdtn.github.io/demo/360/360 简单网格材质 MeshNor ...

  8. WebGL three.js学习笔记 创建three.js代码的基本框架

    WebGL学习----Three.js学习笔记(1) webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的 ...

  9. WebGL three.js学习笔记 6种类型的纹理介绍及应用

    WebGL three.js学习笔记 6种类型的纹理介绍及应用 本文所使用到的demo演示: 高光贴图Demo演示 反光效果Demo演示(因为是加载的模型,所以速度会慢) (一)普通纹理 计算机图形学 ...

随机推荐

  1. iOS拦截导航栏返回按钮事件的正确方式

    当我们使用了系统的导航栏时,默认点击返回按钮是 pop 回上一个界面.但是在有时候,我们需要在点击导航栏的返回按钮时不一定要 pop 回上一界面,比如一个视频播放界面,进入横屏后,默认点击返回按钮仍然 ...

  2. python selenium +autoit实现文件上传 --实践

    upload.html <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&q ...

  3. 使用Apktools反编译apk应用

    使用Apktools反编译apk应用 1.获取APK的classes.dex文件: 得到你想要的应用的apk文件,用解压软件打开apk,从apk中复制出classes.dex文件. 2.classes ...

  4. Python 字典 keys() 方法

    描述 Python 字典 keys() 方法以列表形式(并非直接的列表,若要返回列表值还需调用list函数)返回字典中的所有的键. 语法 keys() 方法语法: D.keys() 参数 无. 返回值 ...

  5. STM32以太网ETH

    注:stm32F1系列中F103片上不含MAC控制器,所以不支持以太网,只有F105和F107才支持

  6. [hihoCoder] #1044 : 状态压缩·一

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在兑换到了喜欢的奖品之后,便继续起了他们的美国之行,思来想去,他们决定乘坐火车前往下一座城市——那座城市即将 ...

  7. 创建C3P0数据源

    [Author]: kwu 创建C3P0数据源,实际开发中直接用JDBC连接数据库是非常少的.一般使用数据源的形式,C3P0是开源的数据源,实际项目用得非常多: 1.添加maven的支持 <de ...

  8. [k8s]通过svc来访问集群podhttp://api:8080/api/v1/namespaces/default/services/mynginx/proxy/

    以往的套路是,安装完成k8s集群后-->安装dns-->安装ingress以便外面访问(或者映射nodeport方式) 如果你不想做任何关于ingress/nodeport一些操作.想通过 ...

  9. ORACLE自定义顺序排序

    ORACLE可以借助DECODE函数,自定义顺序排序: select * from ( select 'Nick' as item from dual union all select 'Viki' ...

  10. 【NOI】9272 偶数个三

    题目 链接:bajdcc/ACM 描述 在所有的N位数中,有多少个数中有偶数个数字3?结果模12345.(1<=N<=10000) 样例输入 2 样例输出 73 方法一:穷举 评价:最简单 ...