DOM之class中添加或移除选择器
1.封装函数addClass()
function addClass(obj, className){
//如果原来没有class
if( obj.className == ''){
obj.className = className;
} else {
//如果原来有class
var arrClassName = obj.className.split(' ');
var _index = arrClassName.indexOf(className);
if(_index == -1){
//如果要添加的class原来的class找不到
obj.className += ' ' + className;
}
//如果能找到，不操作
}
}
//indexOf()兼容
Array.prototype.indexOf = Array.prototype.indexOf ||function (index){
var arr = this;
var len = arr.length;
for (var i=0; i<len; i++){
if(arr[i] == index){
return i;
}
}
return -1;
}
2.封装函数removeClass() ，字符串split()和数组join()
function removeClass(obj, className){
//如果原来有class
if( obj.className != ' '){
var arrClassName = obj.className.split(' ');//拆分为数组
var _index = arrClassName.indexOf(className);
if( _index != -1){
arrClassName.splice(_index, 1);
obj.className = arrClassName.join(' ');//删除后，组合为字符串
}
}
}
//indexOf()兼容
Array.prototype.indexOf = Array.prototype.indexOf ||function (index){
var arr = this;
var len = arr.length;
for (var i=0; i<len; i++){
if(arr[i] == index){
return i;
}
}
return -1;
}
3.验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>dom</title> </head> <body> <div id ="div1" class = "box box1">11111</div> <div id ="div2" class = "box box1">11111</div> </body> </html>
试试addClass(oDiv1, 'box2')、addClass(oDiv1, 'box1')等
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
addClass(oDiv1, 'box2');
removeClass(oDiv2, 'box1');
