码迷,mamicode.com
首页 > 其他好文 > 详细

classLIST元素增删改查方法

时间:2016-12-20 00:28:06      阅读:234      评论:0      收藏:0      [点我收藏+]

标签:exp   prot   集合   检测   pattern   ken   asc   ace   api   

window.onload=function () {
var oDiv=document.getElementsByTagName(‘div‘)[0];
var oInP=document.getElementsByTagName(‘input‘)[0];
var aDiv=new classList(oDiv);
oInP.onclick=function(){
aDiv.add(‘ha‘);
alert(oDiv.className);
}
}
/*
如果e有classList属性则返回它,否则,返回一个为e模拟DOMTOkenList API的对象
返回的对象有contains(),add(),remove(),toggle()和toString()等方法
来检测和修改元素e的类集合,如果classList属性是原生支持的。
返回的类数组对象有length和数组索引属性。模拟DOMTokenList不是类数组对象
但是它有一个toArray()方法来返回一个含元素类名的纯数组快照
*/
function classList(e){
//如果e.classList存在,则返回它
if (e.classList) {return e.classList;}
//否则,就伪造一个
else return new CSSClassList(e);
}
//CSSClassList是一个模拟DOMTOkenList的javascript类
function CSSClassList(e){this.e=e;}
//如果e.className包含类名c则返回true,否则返回false
CSSClassList.prototype.contains=function(){
//检查c是否合格类名,=-1代表找不到
if(c.length==0||c.indexOf(" ")!=-1)
throw new Error("Invalid calss name:"+c+"‘");
var classes=this.e.className;
if(!classes) return false;
//e不含类名
if(classes===c)return true;
//e有一个完全匹配的类名
return classes.search("\\b"+ c +"\\b")!=-1;
};
//如果c不存在,将c添加到e.className中
CSSClassList.prototype.add=function(c){
if(this.contains(c)) return;
var classes=this.e.className;
if(classes&&classes[classes.length-1]!=" ")
c=" "+c;
this.e.className+= c;
};
//将在e.className中出现的所有的c删除掉
CSSClassList.prototype.remove=function(c){
if(c.length==0||c.indexOf(" ")!=-1)
throw new Error("Invalid calss name:"+c+"‘");
var pattern=new RegExp("\\b"+ c +"\\b\s*","g");
this.e.className=this.e.className.replace(pattern,"");
};
//如果c不存在,将c添加到className中,并返回true;
//否则,将在e.className中出现的所有c都删除,并返回fasle
CSSClassList.prototype.toggle=function(c){
if(this.contains(c)){this.remove(c);return false;}
else{this.add(c);return true;}
};
//返回e.className本身
CSSClassList.prototype.toString=function(){
return this.e.className;
}
//返回在e.className中的类名
CSSClassList.prototype.toArray=function()
{return this.e.className.match(/\b\w+\b/g)||[];};

classLIST元素增删改查方法

标签:exp   prot   集合   检测   pattern   ken   asc   ace   api   

原文地址:http://www.cnblogs.com/Guoguomix/p/6200939.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!