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

第一部分：原生js实现addClass,removeClass,hasClass方法

function hasClass(elem, cls) {cls = cls || '';if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回falsereturn 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实现jQuery的addClass, removeClass, hasClass函数功能

function addClass(obj, cls){var obj_class = obj.className,//获取 class 内容.blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.obj.className = added;//替换原来的 class.
}function removeClass(obj, cls){var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd 'obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd 'removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd 'removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'obj.className = removed;//替换原来的 class.
}function hasClass(obj, cls){var obj_class = obj.className,//获取 class 内容.obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.x = 0;for(x in obj_class_lst) {if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含clsreturn true;}}return false;
}

转载自：http://www.jb51.net/article/83101.htm

原生js实现addClass,removeClass,hasClass方法相关推荐

[js进阶]原生js实现addClass,removeClass,hasClass方法
addClass function addClass(obj, cls){//获取 class 内容.var obj_class = obj.className,//判断获取到的 class 是否为空 ...
原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
jQuery对类的操作.addClass()/.removeClass()/.hasClass()方法
.addClass():给DOM元素添加类名,间接控制样式 .removeClass():移除DOM元素的样式 .hasClass():判断DOM元素是否有某类名 [例]代码功能:点击换肤.原理:设置 ...
原生js实现preAll和nextAll方法
一直以来都在好奇,jquery的prevAll和nextAll方法都是咋实现的,那么厉害,而且还那么方便.不得不说,jquery真的帮我们省去了开发中手写大量js代码带来的开发进度问题,而且很好的解决 ...
漫谈原生JS添加元素的两种方法
漫谈原生JS添加元素常规方法常规方法是首先创建一个目标元素并赋值给某个变量 ,但是元素里面内容较多,需要innerHTML赋值,将含有内容的变量赋值给目标元素的变量,最后,将这个目标元素的变量通过 ...
原生JS查找相邻元素——siblings方法
在JQuery中可以很方便地用 elem.siblings() 方法实现查找相邻元素,但在JS中并没有这样的方法,可以用previousSibling和nextSibling结合来实现. 不过在JS中 ...
原生JS替代jQuery的各种方法汇总
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
【数组方法大合集】原生js数组array常用工具方法大合集
var array = {/* 数组求和*/sum: arr => eval(arr.join("+")),/* 判断一个数组(支持一个字符串)里面的是否有任何一个元素被包含 ...
css原生样式支持,原生JS读写CSS样式的方法
通过Element对象的getAttribute().setAttribute().removeAttribute()直接读写style属性如:elm.setAttribute('style','c ...

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

原生js实现addClass,removeClass,hasClass方法相关推荐

最新文章

热门文章