<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. 子集枚举好题UVA1354

    题目 分析:枚举子集以及关于该子集的补集,然后用子集去暴力构造一颗二叉树,注意左边的最远距离不一定来自于左子树,右边的最远距离也不一定来自于右子树 #include "iostream&qu ...

  2. cocos2dx常见32种场景切换动画

    bool HelloWorld::init() { ////////////////////////////// // 1. super init first if ( !CCLayer::init( ...

  3. Sublime Text3配置自动联想python

    1.安装Package Control 通过快捷键 ctrl+` 或者 View > Show Console 打开控制台,然后粘贴相应的 Python 安装代码 Sublime Text 3  ...

  4. VMware Workstation安装centos 6.5详细步骤

    转自“http://blog.51cto.com/12496630/2058386” 22.选择分区了,centos新版中使用lvm来分区,我不用过分去计算分区大小,这个模式可以允许用户以后动态调整分 ...

  5. XTU1266:Parentheses（贪心+优先队列）

    传送门 题意 从左到右有n个连续的组,每一组有Li个括号,要么全是左括号,要么全是右括号,以及该组的每一个左括号翻成右括号, 或者右括号翻成左括号的花费Di.可以对这n个组的括号进行翻转,每一个括号都 ...

  6. Java面试必刷常见真题200+ ，让你“过五关，斩六将”，轻松入大厂

    这份面试清单是我从 2015 年做 TeamLeader 之后开始收集的,一方面是给公司招聘用,另一方面是想用它来挖掘我在 Java 技术栈中的技术盲点,然后修复和完善它,以此来提高自己的技术水平.虽 ...

  7. IT兄弟连 Java Web教程 经典面试题2

    1．Servlet的工作流程? Servlet是运行在Servlet容器中的,由Servlet容器来负责Servlet实例的查找.创建以及整个生命周期的管理,Servlet整个生命周期可以分为四个阶段 ...

  8. 鸟哥私房菜基础篇：Linux 的档案权限与目录配置习题

    猫宁!!! 参考链接:http://linux.vbird.org/linux_basic/0210filepermission.php 鸟哥是为中国信息技术发展做出巨大贡献的人. 1-早期的 Uni ...

  9. python中的栈

    # @File: stack # 列表实现栈 class MyStack(object): def __init__(self): self.data = [] def push(self, item ...

  10. 使用Ctex中遇到的一些问题

    一般下载好Ctex,我是使用Latex+dvi2pdf完成编译的,但是发现推荐的使用为:1)运行CCT & Latex命令生成两次dvi和ps文件 2)使用dvi2pdf编译dvi文件生成pd ...