js实现类名的添加与移除

方法1:使用className属性;

方法2:使用classList API;

//用于匹配类名存在与否
function reg(name){
    return new RegExp(‘(^|\\s)‘+name+‘(\\s+|$)‘);
}

//hasClass addClass removeClass toogleClass
var hasClass,addClass,removeClass;
if(‘classList‘ in document.documentElement){
    hasClass=function(obj,cname){
        return obj.classList.contains(cname);
    };
    addClass=function(obj,cname){
        obj.classList.add(cname);
    };
    removeClass=function(obj,cname){
        obj.classList.remove(cname);
    };
    toggleClass=function(obj,cname){
        obj.classList.toggle(cname);
    };
}else{
    hasClass=function(obj,cname){
        return reg(cname).test(obj.className);
    };
    addClass=function(obj,cname){
        if(!hasClass(obj,cname)){
            obj.className=obj.className+‘ ‘+cname;
        }
    };
    removeClass=function(obj,cname){
        obj.className=obj.className.replace(reg(cname),‘ ‘);
    };
    toggleClass=function(obj,cname){
        var toggle=hasClass(obj,cname)?removeClass:addClass;
        toggle(obj,cname);
    };
}

//true
document.body.classList.toString() === document.body.className;

注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。

所以扩展一下:

//addClass
DOMTokenList.prototype.addClass=function(str){
  tts.split(‘ ‘).forEach(function(c){
    this.add(c);
  }.bind(this));
  return this;
}

//removeClass
DOMTokenList.prototype.removeClass=function(str){
  tts.split(‘ ‘).forEach(function(t){
    this.remove(t);
  }.bind(this));
  return this;
}

//removeClass
DOMTokenList.prototype.toggleClass=function(str){
  tts.split(‘ ‘).forEach(function(t){
    this.toggle(t);
  }.bind(this));
  return this;
}
时间: 2024-10-11 07:02:14

js实现类名的添加与移除的相关文章

js 动态给元素添加、移除事件

最近项目中要要到 js动态给给元素绑定事件,刚好之前没用到过这些,顺便学习一下,于是google了一下 事件,写了如下两个事件 一个添加事件 ,一个是移除事件addEventListener(),removeEventListener()用于处理指定和删除事件处理程序的操作作用域:事件处理程序会在其所属元素的作用域内运行addEventListener(event,function,capturebubble);removeEventListener(event,function,capture

js操作DOM动态添加和移除事件

非IE下,注意事件名不带on,如onclick为click 添加事件:DOM对象.addEventListener('事件名',函数名,true/false); 删除事件:DOM对象.removeEventListener('事件名',函数名,true/false); 第三个参数是useCapture,如果为true,浏览器采用capture截获处理事件顺序:如果为false,浏览器采用bubbing冒泡方式处理事件顺序 一般为false 给个例子,可以自己修改true或false来看效果: <

JS中的DOM操作怎样添加、移除、移动、复制、创建和查找节点

DOM操作怎样添加.移除.移动.复制.创建和查找节点? (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子节点前插入一个新的子节点 (3)查找 getElementsByTagName(

jQuery添加/改变/移除CSS类

转自:http://www.jbxue.com/article/24589.html 在jquery中用到removeClass移除CSS类.addClass添加CSS类.toggleClass添加或者移除CSS类,hasClass判断是否已经存在CSS.改变页面元素样式使用Javascript也可实现,但有没有更简洁的办法,答案是肯定的,现在有了jQuery,似乎让Js代码瘦身了不少,应验了那句话:“jQuery让JavaScript代码变得简洁!”,言归正传,来看jquery如何添加.移除C

js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

DOM操作 --如何添加.移除.移动.复制.创建和查找节点等. (1)创建新节点 createDocumentFragment() //创建一个DOM片段 createElement() //创建一个具体的元素 createTextNode() //创建一个文本节点 (2)添加.移除.替换.插入 (1)创建新节点 createDocumentFragment()    //创建一个DOM片段 createElement()   //创建一个具体的元素 createTextNode()   //创

js拾遗:appendChild 添加移动节点

原文:js拾遗:appendChild 添加移动节点 写js一年多了,一直以为自己很牛逼,开始写各种博文分享,昨天写了一篇<浅谈 IE下innerHTML导致的问题>在看了下面的评论,我才发现自己是多么无知.于是我回头翻阅了下 MDN,Node.appendChild 里面一开始就明确说了,"如果该节点已经存在,则从当前父节点中删除,然后添加到新的父节点."简单来说就是移动当前节点的意思,所以昨天的代码里去掉 obox.innerHTML = ""; 即

js中cookie的添加,删除,查询总结

function addCookie(objName,objValue,objHours){//添加cookie var str = objName + "=" + escape(objValue); if(objHours > 0){//为0时不设定过期时间,浏览器关闭时cookie自动消失 var date = new Date(); var ms = objHours*3600*1000; date.setTime(date.getTime() + ms); str +=

jQuery中添加/改变/移除改变CSS样式例子

在jquery中对于div样式操作我们会使用到CSS() removeClass() addClass()方法来操作了,下面我们就整理了几个例子大家一起来看看吧. CSS()方法改变CSS样式 css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码:  代码如下 复制代码 $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")’表