封装框架-类选择器 四种方法添加、移除、判断、替换

//封装框架类操作1.addClass(添加类)

//2.removeClass(移除样式)

//3.hasClass(判断是否有这个样式)

//4.toggleClass(有这个类就移除,没有就添加个新的)

//例:itcast(div).addClass("类名")

//样式操作模块

itcast.fn.extend({

css:function(name,value){

//第二个参数没有传入,而第一个参数是字符串

if(value===undefined&&typeofname==="string"){

//查询,有兼容问题两种兼容

if(window.getComputedStyle){

varstyles=window.getComputedStyle(this[0]);

returnstyles[name];

}else{

returnthis[0].currentStyle[name];

}

}

//如果设置了值

this.each(function(){

//第一个参数如果是对象

if(value===undefined&&typeofname==="object"){

for(varkinname){

this.style[k]=name[k];

}

}else{

this.style[name]=value;

}

})

returnthis;

},

//添加类样式

addClass:function(cName){

this.each(function(){

varclsName=this.className;

clsName+=""+cName;

this.className=itcast.trim(clsName);

})

returnthis;

},

//移除样式

removeClass:function(cName){

this.each(function(){

varclaname=""+this.className+"";

claName=claName.replace(""+cName+"","");

console.log(claName);

this.className=itcast.trim(claName);

})

returnthis;

},

//如果有这个类就返回true没有就返回false

hasClass:function(cName){

varhasCls=false;

this.each(function(){

varclaName=this.className;

hasCls=(""+claName+"").indexOf(""+cName+"")!==-1;

if(hasCls){

returnfalse;

}

})

returnhasCls;

},

//判断是否有这个类有就移出,没有就添加一个新的

toggleClass:function(cName){

this.each(function(){

if(itcast(this).hasClass(cName)){

itcast(this).removeClass(cName);

}else{

itcast(this).addClass(cName);

}

})

}

});

相关推荐