<!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. Google Map 形状显示

    添加多段线 Polyline 构造函数带有一组用于指定线的 LatLng 坐标的 PolylineOptions,以及一组用于调整多段线视觉行为的样式. Polyline 对象在地图上绘制为一系列直线 ...

  2. 【转】对 Go 语言的综合评价

    以前写过一些对 Go 语言的负面评价.现在看来,虽然那些评价大部分属实,然而却由于言辞激烈,没有点明具体问题,难以让某些人信服.在经过几个月实际使用 Go 来构造网站之后,我觉得现在是时候对它作一些更 ...

  3. python标准库介绍——18 StringIO 模块详解

    ==StringIO 模块== [Example 2-8 #eg-2-8] 展示了 ``StringIO`` 模块的使用. 它实现了一个工作在内存的文件对象 (内存文件). 在大多需要标准文件对象的地 ...

  4. rubygems ruby国内源

    rubygems.org资源不能正常访问,需要调整一下GEM的source镜像 1.首先确认一下当前source镜像地址 gem sources -l 服务器为 https://    ruby    ...

  5. 关于TcpClient,Socket连接超时的几种处理方法

    用TcpClient做通信的时候,经常发现网络连接不通的时候,代码就卡死在那里,TcpClient竟然没有超时的设定 泪奔啊 看来微软不是把所有工具准备得妥妥当当的啊 没办法 现在用线程来包装一下这个 ...

  6. putty设置用key自动登录

    1.在Linux下ssh-keygen -t rsa 生成密钥对 2.把私钥id_isa下载到用scp下载到windows并用puttygen加载并重新保存私钥. 3.在windows下新建快捷方式, ...

  7. js动态给table添加/删除tr的方法

    js动态给table添加/删除tr的方法. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> ...

  8. C++ 智能指针 shared_ptr

    今天晚上去旁听了C++高级编程的课,其中提到智能指针.第一反映还以为是auto_ptr呢,一听才知道是share_ptr这个.哦,原来是C++11特性.大致的原因是auto_ptr有一点缺陷,而sha ...

  9. 使用post向webservice发送请求，并且返回值

    注意,这个方法仅仅适用于:该post页面处于websercive 站点下,或者是与webservice同属于一个主站点,即在iis里属于同一主站点的同级虚拟目录. protected void btn ...

  10. Ubuntu 安装谷歌拼音输入法

    Ubuntu14.04内置的拼音输入法有一个bug,使得Live USB全拼无法使用. 安装Google拼音输入法步骤如下: 1. 打开Ubuntu软件中心 (Ubuntu Software Cent ...