<!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. Excel提示“此工作簿包含一个或多个无法更新的链接”怎么办

    有时打开Excel文件时会弹出一个“此工作簿包含一个或多个无法更新的链接”的提示.对于初次接触这个提示的用户,可能会感到迷惑,不知道应该如何处理,这里以Excel2007为例,介绍一下这个提示出现的原 ...

  2. ASP.NET CORE 学习之自定义异常处理

    为什么异常处理选择中间件? 传统的ASP.NET可以采用异常过滤器的方式处理异常,在ASP.NET CORE中,是以多个中间件连接而成的管道形式处理请求的,不过常用的五大过滤器得以保留,同样可以采用异 ...

  3. Linux调度器 - deadline调度器

    一.概述 实时系统是这样的一种计算系统:当事件发生后,它必须在确定的时间范围内做出响应.在实时系统中,产生正确的结果不仅依赖于系统正确的逻辑动作,而且依赖于逻辑动作的时序.换句话说,当系统收到某个请求 ...

  4. Java+Oracle实现事务——JDBC事务

    J2EE支持JDBC事务.JTA事务和容器事务事务,这里说一下怎样实现JDBC事务. JDBC事务是由Connection对象所控制的,它提供了两种事务模式:自己主动提交和手动提交,默认是自己主动提交 ...

  5. tmux安装

    安装tmux sudo yum -y install tmux 修改tmux配置 cat > /root/.tmux.conf <<EOF set-option -g default ...

  6. debian系在线安装软件apt-get命令族

    一.背景 apt-get install/remove在线安装/卸载文件真是方便极了. 但是有时候安装/卸载文件不清楚文件在服务器上的实际命名,例如想安装sndfile.应该执行下面哪个命令呢? ap ...

  7. Centos7 防火墙关闭和启用iptables防火墙

    操作系统环境:CentOS Linux release 7.0.1406(Core) 64位CentOS 7.0默认使用的是firewall作为防火墙,这里改为iptables防火墙步骤. 1.关闭f ...

  8. RTB竞价中的cookie mapping技术

    首先通过一些关键词解释普及或者回顾一下背景, ADX: Ad exchange的简称.一般特指Ad exchange平台模块 DMP: Data Management Platform的简称.DMP存 ...

  9. Lua整理——table库

    table属性 table库是有一些辅助函数构成的,这些函数将table作为数组来操作. 当中.有对列表中插入和删除元素的函数,有对数组元素进行排序的函数.还有对链接一个数组中全部字符串的函数. 0. ...

  10. 错误 1 error LNK2019: 无法解析的外部符号 "public: __thiscall Distance::Distance(int)" (??0Distance@@QAE@H@Z)，该符号在函数 _main 中被引用

    错误: 错误 1 error LNK2019: 无法解析的外部符号 "public: __thiscall Distance::Distance(int)" (??0Distanc ...