addClass封装:1.先把原有的类名和需要添加的类名用“”切割、拼接。

        2.查重,把所有类名遍历,重复的去掉。

        3.“”拼接。

function addClass(ele , cName) {
  var arr = ele.className.split(" ").concat(cName.split(" "));
      for (var i = 0; i < arr.length; i++)for (var j = arr.length-1; j > i; j--)if ( arr[i] == arr[j] )arr.splice(j,1);
      ele.className = arr.join(" ");

}

removeClass封装:

function removeClass(ele,cName) {
     var arr = ele.className.split(" "),
     arr1 = cName.split(" ");
     for (var i = 0; i < arr1.length; i++) {
          for (var j = 0; j < arr.length; j++) {
            if ( arr1[i] == arr[j] ){
                  arr.splice(j,1);
               }
          }
    }
    ele.className = arr.join(" ");
}

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

  1. 原生JS实现addClass,removeClass,toggleClass

    jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...

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

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

  3. 原声js实现addClass removeClass toggleClass效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生js封装的一些jquery方法

    用js封装一些常用的jquery方法 记录一下 hasClass:判断是否有class function hasClass(ele, cls) { if (!ele || !cls) return f ...

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

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

  6. 城市三级联动 AJAX-原生js封装

    话不多说我们先来一张效果图给大家看一下: html代码如下: <!DOCTYPE html><html lang="en"><head> < ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 使用NW.js封装微信公众号菜单编辑器为桌面应用

    开发微信公众号的朋友都会遇到一个常见的需求就是修改自定义菜单,如果每个人都去开发这个不经常使用的功能确实有点浪费时间.前段时间在github上找到一个仿企业号的菜单编辑界面,结合微信的C# SDK开发 ...

  9. 用jQuery基于原生js封装的轮播

    我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址 ...

随机推荐

  1. C# 封装winio.dll 驱动级按键鼠标操作模拟

    using System;using System.Collections.Generic;using System.Text;using System.Runtime.InteropServices ...

  2. KMP algorithm challenge string.Contains

    KMP: public int KMP (ReadOnlySpan<char> content, ReadOnlySpan<char> span) { _next = new ...

  3. 如何在Ubuntu上安装腾讯QQ

    首先QQ国际版下载连接:http://pan.baidu.com/s/1sj7i6BF 安装步骤: 一:安装依赖库 在终端输入:sudo apt-get install  libgtk2.0-0:i3 ...

  4. [qemu][kvm] 在kvm嵌套kvm的虚拟机里启动kvm加速

    常规情况下,如果在kvm的虚拟机里,又想使用kvm的虚拟机,会报如下的错误信息: [root@host0 nlb]# Could not access KVM kernel module: No su ...

  5. SpringBoot-性能优化之扫包优化

    性能优化 组件自动扫描带来的问题 默认情况下,我们会使用 @SpringBootApplication 注解来自动获取应用的配置信息,但这样也会给应用带来一些副作用.使用这个注解后,会触发自动配置( ...

  6. Elasticsearch 快速入门教程

    面向文档 应用中的对象很少只是简单的键值列表,更多时候它拥有复杂的数据结构,比如包含日期.地理位置.另一个对象或者数组. 总有一天你会想到把这些对象存储到数据库中.将这些数据保存到由行和列组成的关系数 ...

  7. 9个用来爬取网络站点的 Python 库

    上期入口:10个不到500行代码的超牛Python练手项目 1️⃣Scrapy 一个开源和协作框架,用于从网站中提取所需的数据. 以快速,简单,可扩展的方式. 官网:https://scrapy.or ...

  8. 使用AMBER中遇到的一些问题

    1.读取蛋白问题 读取无配体pdb文件(loadpdb complex.pdb)时,出现一堆 FATAL: Atom .R<ARG >.A<HD1 > does not hav ...

  9. 颜色扩展类--ColorExtensions

    /// <summary> /// 颜色扩展类 /// </summary> public static class ColorExtensions { /// <sum ...

  10. Servlet+纯java+MySQL实现课程信息的增删改查

    Dbutil: package com.zh.util; import java.sql.Connection; import java.sql.DriverManager; import java. ...