原生JS实现hasClass,addClass,removeClass

1、hasClass

 function hasClass(elem, cls){
     cls = cls || '';
     if(cls.replace(/\s/g, '').length == 0) return false;
     return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
 }

2、addClass

 function addClass(elem, cls){
     if(!hasClass(elem, cls)){
         elem.className += ' ' + cls;
     }
 }

3、removeClass

 function removeClass(elem, 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, '');
     }
 }

//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test")
if(hasClass(document.getElementById("test"), "test")){//do something};

转载于:https://www.cnblogs.com/wsir/p/5553720.html

原生JS实现hasClass,addClass,removeClass相关推荐

js 实现 hasClass(), addClass(), removeClass() 方法
js 实现 hasClass(), addClass(), removeClass() 方法 HTML5-classList classList 方法有 contains('className') / ...
常用的js自定义方法 -- hasClass addClass removeClass getElementsByClass
function hasClass(ele,cls) { var result = ele && ele.className && (ele.className.sea ...
hasClass addClass removeClass
//函数有class function hasClass(ele,cls){ return -1<(" "+ele.className+" ").inde ...
原生js 样式的操作整理
内联样式的获取 function getStyle(obj,attr){//简单的获取内联样式return obj.currentStyle?obj.currentStyle[attr]:obj.ge ...
原生js实现addClass,removeClass,hasClass方法
第一部分:原生js实现addClass,removeClass,hasClass方法 function hasClass(elem, cls) {cls = cls || '';if (cls.rep ...
原生JS实现addClass,removeClass,toggleClass
jQuery操作class的方式非常强大,但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery. 在此写了一个利用原生js来实现对dom元素class的操作方法 1.addCl ...
怎么用js实现jq的removeClass方法
1.addClass:为指定的dom元素添加样式. 2.removeClass:删除指定dom元素的样式. 3.toggleClass:如果存在(不存在),就删除(添加)一个样式. 4.hasClas ...
原生js来实现对dom元素class的操作方法
jQuery操作class的方式非常强大写了一个利用原生js来实现对dom元素class的操作方法 1.addClass:为指定的dom元素添加样式 2.removeClass:删除指定dom元素的 ...
原生JS实现的DOM操作笔记（草稿整理）
原生JS实现的DOM一系列操作参考: 原生JavaScript封装DOM库 siblings: 原生JS-查找相邻的元素-siblings方法的实现 addClass,removeClass,hasC ...

原生JS实现hasClass,addClass,removeClass

原生JS实现hasClass,addClass,removeClass相关推荐

最新文章

热门文章