<!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. selenium+python : Waits---study

    from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.s ...

  2. RHEL7 - LINUX中的UID

    在RHEL7中: ·UID 0 分配给超级用户 ·UID 1-200是一系列“系统用户”,静态分配给红帽的系统进程 ·UID 201-999是一系列“系统用户”,供文件系统中没有自己的文件的系统进程使 ...

  3. 关于PFM工作模式的一些资料总结

    一.PFM模式 为什么升压中用的多呢(http://bbs.eetop.cn/thread-357181-1-1.html) 1.PFM 对于Boost Converter来说可以把PWM固有的右半平 ...

  4. php的类型运算符instanceof(用于确定一个 PHP 变量是否属于某一类 class 的实例)

    用于确定一个 PHP 变量是否属于某一类 class 的实例 class Test{ public function Test($c) { echo "1111"; if($c i ...

  5. Java：集合，对列表（List）中的数据（整型、字符串、日期等）进行排序（正序、倒序）的方法；字符串按照整型排序的方法

    1. 要求 对List列表中的数据进行排序(正序.倒序),列表中的数据包括:整型(Integer).字符串(String).日期(Date)等.对于字符串,要求允许对它按照整型进行排序. 2. 实现思 ...

  6. onethink后台边栏，添加新的方法后不显示，是需要在后台系统中添加功能，如下图

  7. Serviceability

    http://hg.openjdk.java.net/jdk7u/jdk7u2/hotspot/file/6259c6d3bbb7/agent/doc/clhsdb.html http://blog. ...

  8. 解决Java连接MySQL存储过程返回参数值为乱码问题

    先说MySQL的字符集问题.Windows下可通过修改my.ini内的 [mysql] default-character-set=utf8    //客户端的默认字符集 在MySQL客户端工具中输入 ...

  9. Install haroopad on centos7

    1.Install libs sudo yum install systemd-libs -y 2.Download haroopad goto haroopad1 download bin pack ...

  10. win32串口编程

    翻译自:ms-help://MS.MSDNQTR.v80.chs/MS.MSDN.v80/MS.WIN32COM.v10.en/dnfiles/html/msdn_serial.htm 老外写的文章, ...