<!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 中的tintColor

    在iOS 7后,UIView新增加了一个tintColor属性,这个属性定义了一个非默认的着色颜色值,其值的设置会影响到以视图为根视图的整个视图层次结构.它主要是应用到诸如app图标.导航栏.按钮等一 ...

  2. 【jQuery】JQuery-ui autocomplete与strtus2结合使用

    汉字搜索效果图: 拼音首字母搜索效果图:  1)数据库表及函数(SQL Server 2008) 先来建立数据库表City,它包含两个字段CityID,CityName. CREATE TABLE C ...

  3. 《JAVA与模式》之适配器模式(转载)

    适配器模式比较简单,偷个懒,直接转载一篇. 个人理解: * 类适配器是通过继承来完成适配 * 对象适配器是通过传递对象来完成适配 * 不管哪种,其实都是通过引用特殊接口的对象来完成特殊接口的适配调用 ...

  4. 摘：ClickOnce部署

    ClickOnce部署 http://www.cnblogs.com/weixing/p/3358740.html#undefined (1):一些发布方式 ClickOnce是什么玩意儿,这个问题嘛 ...

  5. 图解最小生成树 - 克鲁斯卡尔(Kruskal)算法

    我们在前面讲过的<克里姆算法>是以某个顶点为起点,逐步找各顶点上最小权值的边来构建最小生成树的.同样的思路,我们也可以直接就以边为目标去构建,因为权值为边上,直接找最小权值的边来构建生成树 ...

  6. Jquery 对比 Javascript

    转自 http://www.webhek.com/you-do-not-need-jquery AJAX JSON JQUERY $.getJSON('/my/url', function(data) ...

  7. mysql 怎么给一个表一次增加多个字段， mysql 添加 多个 字段

    sql 语句: ALTER TABLE oversea_liveauctioneers_detail_info_2018 ADD `result` LONGTEXT, ADD `buyer_premi ...

  8. Linux中的wget命令

    Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...

  9. nexus代理地址整理

    为给大家提供方便构建开源软件,分享下自己研究一些开源软件的时候,为方便构建搭建的nexus仓库以及代理地 名称 地址 apache-content-releases https://repositor ...

  10. 在 ASP.NET Web API 中，使用 命名空间（namespace） 来作为路由的参数

    这个问题来源于我想在 Web API 中使用相同的控制器名称(Controller)在不同的命名空间下,但是 Web API 的默认 路由(Route) 机制是会忽略命名空间的不同的,如果这样做,会看 ...