原生js实现addClass,removeClass,hasClass方法
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方法的更多相关文章
- 原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断. classList属性的方法有: add(value) 添加类名,如果有则不添加 c ...
- 原生JavaScript实现的addclass,removeclass,hasclass,toggleclass,getbyclass
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
- 【JS】怎样用原生JS实现jQuery的ready方法
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,只是与window.onload方法还是有差别的. 总的来说,window. ...
- 用原生JS读写CSS样式的方法总结
为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDe ...
- 原生js 数组的迭代的方法
一.原生js Array给我们提供很多了方法.方便我们操作数组.这些方法的参数,都需要传入一个匿名函数,匿名函数中有三个参数,分别含义是:数组中的项.该项的索引.以及数组本身. 1.filter方法: ...
- 用.native修饰器来对外部组件进行构造器内部方法的调用以及用原生js获取构造器里的方法
html <div id="app"> <span v-text="number"></span> <btn @cli ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
随机推荐
- iOS开发——语法OC篇&Block回顾
Block回顾 这里知识简单介绍一下关于Block的语法,如果你觉得这里很简单或者想学习更深入的的使用清查看记者之前写的使用block传值和高级Block使用: http://www.cnblogs. ...
- 基于jQuery右侧带缩略图导航的焦点图
今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...
- _IO, _IOR, _IOW, _IOWR 宏的用法与解析
转载:http://blog.chinaunix.net/uid-20754793-id-177774.html 今天在写字符驱动验证程序的时候要用到ioctl函数,其中有一个cmd参数,搞了半天也不 ...
- Django之牛逼的Models
Django里的模型是对数据库对表的一次封装,是应用业务与数据之间的桥梁 要想使用Django的models 首先得配置settings Django默认使用的是sqlite,我使用的Mysql,配置 ...
- Linux 查看物理内存
free -k free -m free -b man free cat /proc/meminfo
- 在提交SVN时有时候会报svn is already locked 错误
svn is already locked 解决方案: 如题所述经常在更新代码的时候会产生这样的问题!并且在对应的目录上操作Clean Up 没有任何的效果!如下解决方法. 在出错文件夹下,鼠标右键T ...
- LOG4J.PROPERTIES配置详解(转载)
Log4J的配置文件(Configuration File)就是用来设置记录器的级别.存放器和布局的,它可接key=value格式的设置或xml格式的设置信息.通过配置,可以创建出Log4J的运行环境 ...
- leetcode题解:Binary Tree Postorder Traversal (二叉树的后序遍历)
题目: Given a binary tree, return the postorder traversal of its nodes' values. For example:Given bina ...
- Java Script基础(八) Array数组对象
一.Array数组 JavaScript中的数组也是具有相同数据类型的一个或者多个值得集合.用法和Java中的数组类似. Array对象的常用属性和方法: 属性: length:获取数组的长度: 方法 ...
- (转)JavaScript 中对变量和函数声明的“提前(hoist)”
变量声明“被提前” JavaScript 的语法和 C .Java.C# 类似,统称为 C 类语法.有过 C 或 Java 编程经验的同学应该对“先声明.后使用”的规则很熟悉,如果使用未经声明的变量或 ...