<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. Laravel 5 微信小程序扩展

    小程序官方的加解密 SDK 已经非常清楚了,只不过改成 Laravel 风格而已,仅仅相当于搬砖工.至于重复造轮子,我发现其他人的扩展解密用户信息的时候代码出错了,并且需要安装一个 Laravel 的 ...

  2. Java多线程:线程状态以及wait(), notify(), notifyAll()

    一. 线程状态类型1. 新建状态(New):新创建了一个线程对象.2. 就绪状态(Runnable):线程对象创建后,其他线程调用了该对象的start()方法.该状态的线程位于可运行线程池中,变得可运 ...

  3. 用 SDL2 在屏幕上打印文本

    打印完图片,是时候打印文字了.这里引用了SDL的字体扩展库,SDL2_ttf.lib,需要包含相应的头文件. 环境:SDL2 + VC++2015 下面的代码将在窗口打印一段文字,并对相应的操作做出响 ...

  4. 006--linux基础rpm和yum的使用和源码安装

    一.rpm相关命令介绍 1. 查看CD里面有的文件 2. 用rpm来安装一个名为vsftpd的rpm包 3. rpm -qi 软件包名 (查看软件包的详细信息) 4. rpm -ql 软件包名 (查看 ...

  5. eclipse快捷键设置

    文章斋词水电费 55 48 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的浏览源代码,使得整体的开 ...

  6. Integer Cache(带你脱坑)

    Integer Cache 废话不多说----->直接上代码: public class IntegerDemo { public static void main(String[] args) ...

  7. ipset 学习总结

    用途:当机器受到网络攻击时,使用 iptables 封 IP,有时候可能会封禁成千上万个 IP,如果添加成千上万条规则, 在一台注重性能的服务器或者本身性能就很差的设备上就不在适用了.ipset 就是 ...

  8. the little schemer 笔记(4)

    第四章 numbers games 14 是原子吗 是的,数都是原子 (atom? n) 是真还是假,其中n是14 真,14 是原子 -3是数吗 是的,不过我们暂不考虑负数 3.14159是数吗 是的 ...

  9. Python函数和面向对象题目

  10. 条形码问题 dp+求某个序列在某种排列中的序号的方法

    题目 条形码是一种由亮条(Light Bar)和暗条(Dark Bar)交替出现且以暗条为起头的符号,每条都占有若干个单位宽.图33-1给出了一个含有4个条的条形码,它延续了1+2+3+1=7单位的宽 ...