function hasClass(elem, cls) {
cls = cls || '';
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
} function addClass(ele, cls) {
if (!hasClass(elem, cls)) {
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
}
} function removeClass(ele, cls) {
if (hasClass(elem, cls)) {
var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
newClass = newClass.replace(' ' + cls + ' ', ' ');
}
elem.className = newClass.replace(/^\s+|\s+$/g, '');
}
}

原生js实现addClass,removeClass,hasClass方法的更多相关文章

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

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

  2. html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法

    其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...

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

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

  4. 原生js实现preAll和nextAll方法

    一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...

  5. 【JS】怎样用原生JS实现jQuery的ready方法

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...

  6. 用原生JS读写CSS样式的方法总结

    为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了!   一.可以通过DOM节点对象的style对象(即CSSStyleDe ...

  7. 原生js 数组的迭代的方法

    一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法: ...

  8. 用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法

    html <div id="app"> <span v-text="number"></span> <btn @cli ...

  9. 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)

    1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...

随机推荐

  1. iOS开发——语法OC篇&Block回顾

    Block回顾 这里知识简单介绍一下关于Block的语法,如果你觉得这里很简单或者想学习更深入的的使用清查看记者之前写的使用block传值和高级Block使用: http://www.cnblogs. ...

  2. 当调用List Remove 失效时 [C#] .

    有没有试过从一个集合里面移除一个对象之后,这个集合仍然留有这个对象?世界之大,无奇不有.稍有疏忽,便会导致这种奇怪的现象.现在让我们看看这个“不死”对象究竟是怎么一回事. 1.“不死”对象现身 这个问 ...

  3. oc-25-id类型

    /** id:万能指针 能够指向任何OC对象. id = NSObject *, id cat = [Cat new]; [cat jump]; NSObject:是所有类的父类,基类.可以指向任何O ...

  4. Xcode快照——管理应用程序版本

    转自:http://blog.csdn.net/yuanbohx/article/details/8919474 1.创建快照:FIle → Create Snapshot 2.查看快照:Window ...

  5. 在MVC中动态读取JSON数据创建表格

    //使用getJSON // ("@Url.Action("GetAllUsers","User")" ,json文件的路径.也可以是 /M ...

  6. nie题目-游戏排行榜设计

    一个mmorpg游戏,玩家众多,需要对玩家战斗力进行排行,并且战斗力变化时需要及时刷新.需要设计一个这样的排行榜. 关于海量数据排行榜的做法,云风在他的博客里给过思路,谈谈陌陌争霸在数据库方面踩过的坑 ...

  7. windows和linux中检查端口是否被占用

    一.windows 1.查询端口占用情况 cmd > netstat -ano 2.查询8080端口是否被占用 cmd > netstat -ano|findstr 8080 3.查询哪个 ...

  8. Joy of Programming: Understanding Bit-fields in C

    转:http://www.linuxforu.com/2012/01/joy-of-programming-understanding-bit-fields-c/ By S.G. Ganesh on ...

  9. The Socket API, Part 4: Datagrams

    转:http://www.linuxforu.com/2011/11/socket-api-part-4-datagrams/ By Pankaj Tanwar on November 1, 2011 ...

  10. 关于linux系统安全配置脚本

    本脚本是第二次更新,已经大量应用在某大型媒体网站体系中,加入了之前没有想到的一些安全设置.使用方法将其复制,保存为一个shell文件,比如security.sh.将其上传到Linux服务器上,执行sh ...