<script>

        window.onload = function()

        {

            var oDiv = document.getElementById('div1');

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

            addClass(oDiv,'box1');

            removeClass(oDiv2,'box');

            function addClass(obj,className)

            {

                //如果原来没有Class

                if(obj.className == ''){

                    obj.className = className;

                } else{

                //如果原来有class

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

                    var _index = arrIndexOf(arrClassName,className);

                    if(_index == -1)

                    {

                        //如果要添加的class在原来的class中不存在

                        obj.className += ' ' + className;

                    }

                        //如果要添加的class在原来的class中存在

                }

            };

            function removeClass(obj,className)

            {

                //如果原来有class

                if(obj.className !='')

                {

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

                    var _index = arrIndexOf(arrClassName,className);

                    //如果有我要移除的class

                    if(_index != -1)

                    {

                        arrClassName.splice(_index,1);

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

                    }

                }

                //如果原来没有class就什么都不做

            };

            function arrIndexOf(arr,v)

            {

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

                {

                    if(arr[i] == v)

                    {

                        return i;

                    }

                }

                return -1;

            };

        };

</script>

<body>

    <div id="div1" class="box">aaaa</div>

    <div id="div2" class="box">bbb</div>

</body>

封装addClass 、 removeClass的更多相关文章

  1. 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. jQuery addClass removeClass toggleClass hasClass is(.class)用法

    jQuery addClass removeClass toggleClass hasClass is(.class)用法 <%@ page language="java" ...

  3. jQuery的addClass,removeClass和toggleClass方法

    jQuery的addClass,removeClass和toggleClass方法,最后一个方法在某一情形之下,可以替代前面2个方法. 第一个方法addClass为元素添加一个class. 第二个方法 ...

  4. jquery 对svg 元素的addClass removeClass 支持

    jquery 2.2 之后才支持对svg 元素的addClass removeClass

  5. JS封装addClass、removeClass

    addClass封装:1.先把原有的类名和需要添加的类名用“”切割.拼接. 2.查重,把所有类名遍历,重复的去掉. 3.“”拼接. function addClass(ele , cName) { v ...

  6. addClass, removeClass, toggleClass（从jquery中抠出来）

    <div id="d3" class="cur"></div> var mylibs = (function(){ var rtrim ...

  7. hasClass addClass removeClass

    //函数有class function hasClass(ele,cls){ return -1<(" "+ele.className+" ").inde ...

  8. 原生js实现addClass,removeClass,hasClass方法

    function hasClass(elem, cls) { cls = cls || ''; if (cls.replace(/\s/g, '').length == 0) return false ...

  9. ul li span addClass removeClass

    <link type="text/css" href="./style/css/base.css" rel="stylesheet"& ...

随机推荐

  1. 「NOIP2012」「LuoguP1083」 借教室

    Description 在大学期间,经常需要租借教室.大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室.教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样. 面对海量租借教室的 ...

  2. 「 LuoguT37042」 求子序列个数

    Description 给定序列 A, 求出 A 中本质不同的子序列 (包含空的子序列) 个数模 10^9+ 7 的结果. 一个序列 B 是 A 的子序列需要满足 A 删掉某些元素后能够得到 B. 两 ...

  3. 【前端】CentOS 7 系列教程之二： 安装 git 最新版

    转载请注明出处:http://www.cnblogs.com/shamoyuu/p/linux_2.html 这一篇我们来安装git高版本. 卸载yum安装的旧版本 yum remove git 安装 ...

  4. API接口文档的撰写

    接口文档: 要写:接口简介.请求参数.返回结果.注意事项. 下面以“喜马拉雅的 ‘圈子’ ”为例子: 接口一 (1)接口简介 http://ipservice.mogujie.com/ipservic ...

  5. 孙鑫C++教学视频

    视频百度云:https://pan.baidu.com/s/1jKf6GoY 在线观看:http://list.youku.com/albumlist/show?id=3567028&asce ...

  6. A - Two Substrings

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description You ar ...

  7. 【WIP】swift3的timer的用法

    创建: 2017/10/14   更新: 2017/10/14 标题加上[WIP],补充创建时间     回家再写

  8. hdoj1166【线段树】

    单点更新+区间求和 不多说,直接上渣code--- #include<cstdio> #include<iostream> #include<string.h> # ...

  9. java实训 ：异常（try-catch执行顺序与自定义异常）

    关键字: try:执行可能产生异常的代码 catch:捕获异常 finally:无论是否发生异常代码总能执行 throws:声明方法可能要抛出的各种异常 throw:手动抛出自定义异常 用 try-c ...

  10. SPRING-BOOT系列之SpringBoot快速入门

    今天 , 正式来介绍SpringBoot快速入门 : 可以去如类似 https://docs.spring.io/spring-boot/docs/2.1.0.BUILD-SNAPSHOT/refer ...