<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. bzoj 4260 REBXOR —— Trie树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4260 用 Trie 树可以找出前缀异或的最大值和后缀异或的最大值,拼起来即可: 注意要先加入 ...

  2. 【WEB基础】HTML & CSS 基础入门（4）列表及其样式

    前面 网页中漂亮的导航.整齐规范的文章标题列表和图片列表等等.这些都是离不开HTML里一个重要的元素----列表,在HTML中有无序列表.有序列表和定义列表三种类型.其中,无序列表应用最为广泛,下面, ...

  3. BZOJ2217:Lollipop

    题意 给定一个由1和2组成的序列,多次询问是否存在一个区间满足区间和=x 分析 结论:假如存在一个子串和为x,那么一定存在一个前缀,和为x或x+1 证明:可以认为原串是由和为x的串在开头和结尾添加若干 ...

  4. lightoj1200 【完全背包】

    题意: 有一个能放W重的袋子,然后妻子给了老公一列清单,每个item会有价格,数量,重量. 首先得满足老婆的要求,然后在可装的地方输出最大还能拿多少使得拿的东西的钱最多. 注意标题是thief,我想大 ...

  5. 基于FBX SDK的FBX模型解析与加载 -（四）

    8. 骨骼蒙皮动画 骨骼蒙皮动画是当前游戏引擎中最常用的一种动画方式,关于其基本原理网络上的资料较多,关于到涉及的其它较复杂操作,如插值.融合等在这里也就先不再讨论了,而且其实现方式也与具体引擎的动作 ...

  6. SVG动画 -- 描边动画

    代码说明:纯CSS实现,无JS <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  7. WPS Office 2019 for Linux来了

    难得啊,焕然一新. WPS Office 2019 For Linux更新说明 11.1.0.8392 版本主要更新: 修复wpsoffice进程存在时不能关机的问题 修复WPS文字模块web版式下拖 ...

  8. Django学习:url路由系统

    一.MTV模型 1.Django的MTV分别代表: Model(模型):和数据库相关的,负责业务对象与数据库的对象(ORM) Template(模板):放所有的html文件 模板语法:目的是将白变量( ...

  9. Poj 3666 Making the Grade (排序+dp)

    题目链接: Poj 3666 Making the Grade 题目描述: 给出一组数,每个数代表当前位置的地面高度,问把路径修成非递增或者非递减,需要花费的最小代价? 解题思路: 对于修好的路径的每 ...

  10. 第05课 Linux命令初探（一）

    该篇为第一部分,主要介绍的Linux指令有: mkdir.cd.ls.rm.touch.vi/vim.echo.cat.cp.mv.pwd.rm.rmdir 1.创建一个目录/data 提示:Wind ...