浅析原生js模仿addclass和removeclass

 1 //判断有没有class
 2 hasClass(elements, cName) {
 3   return !!elements.className.match(new RegExp("(\\s|^)" + cName + "(\\s|$)")); // ( \\s|^ ) 判断前面是否有空格 (\\s | $ )判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断
 4 },
 5 //移除class
 6 removeClass(elements, cName) {
 7   if (this.hasClass(elements, cName)) {
 8     elements.className = elements.className.replace(new RegExp("(\\s|^)" + cName + "(\\s|$)"), " "); // replace方法是替换
 9   }
10 },
11 //添加class
12 addClass(elements, cName) {
13   if (!this.hasClass(elements, cName)) {
14     elements.className += " " + cName;
15   }
16 },

原文地址:https://www.cnblogs.com/mxyr/p/9238007.html

时间: 2024-10-31 10:06:42

浅析原生js模仿addclass和removeclass的相关文章

原生js 用正则实现removeclass hasclass getsclass addclass .

1 function getByClass(oParent,sClass){ 2 if(oParent.getElementsByClassName){ 3 return oParent.getElementsByClassName(sClass); 4 }else{ 5 var arr=[]; 6 var aEle=oParent.getElementsByTagName('*'); 7 var re=new RegExp('\\b'+sClass+'\\b'); 8 9 for(var i=

原生JS实现addClass,removeClass,toggleClass

<style type="text/css"> div.testClass{ background-color:gray; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function ad

JS封装addClass、removeClass

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

原生js实现addClass方法

function addClass(element,class) { // }

Todolist -- 原生JS模仿

TODOLIST(小白向) 编程思想 我们在学习一门语言时,从它的语法,特性,功能种种进行了解,但是能让你开始掌握这门语言的,是在你在键盘上开始实践的时候. 而一个项目,无论大小,即便是TodoList,也可以让你的实践开始质变. 为什么会产生质变,就是因为编程思想的改变. 当你练习语言的时候,你想的最多的就是怎么让结果产生.但对于小白来说,这个过程是痛苦的. 比如这次实践,我的想法很简单,如下图: 但是,很明显,处理起来很困难,自己理解.继续下来更加困难. 接着,我看看别人是怎么想的,思想大概

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

原生js添加class

function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls

放弃jQuery,使用原生js吧!

转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用.下面介绍几个原生替换jq的方法. 获取元素 JQuery $('.xxx'); //class获取 $('#xxx'); //id获取 $('.xxx.ccc'); //同时包含xxx和ccc $('.xxx,.zzz'); //多选 $('.xxx div'); //子类 $('.xxx

原生js仿jquery一些常用方法

原生js仿jquery一些常用方法 下面小编就为大家带来一篇原生js仿jquery一些常用方法(必看篇).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧 最近迷上了原生js,能不用jquery等框架的情况都会手写一些js方法,记得刚接触前端的时候为了选择器而使用jquery...现在利用扩展原型的方法实现一些jquery函数: 1.显示/隐藏 //hide() Object.prototype.hide = function(){ this.style.displa