html5 list 优化,HTML5的classList API优化对样式名className的操作

HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法：

//添加一个class

elem.classList.add(classname);//删除一个class

elem.classList.remove(classname);//判断一个class是否已存在

elem.classList.contains(classname);//如果class已存在则移除，如果不存在则添加

elem.classList.toggle(classname);

更多更详细的方法请参看HTML5 classList API。

这些方法以前是通过JavaScript来实现的，现在HTML5提供了这些原生的API，我们可以用它来优化以前用JavaScript来实现的操作方法，但是也要保证兼容不支持这几个API的浏览器。具体代码如下：

javascript:

function N(id){returndocument.getElementById(id)}

N.trim= String.prototype.trim || function(str){return str.replace(/^s+/, '').replace(/s+$/, '');

};if( document.createElement('p').classList ){

N.addClass= function(elem, className){

elem&& elem.classList &&elem.classList.add(className);

};

N.removeClass= function(elem, className){

elem&& elem.classList &&elem.classList.remove(className);

};

N.hasClass= function(elem, className){return elem && elem.classList &&elem.classList.contains(className);

};

N.toggleClass= function(elem, className){

elem&& elem.classList &&elem.classList.toggle(className);

};

alert('Use html5 classList!');

}else{

N.addClass= function(elem, className){if( elem ){var cn =elem.className;if(!cn){

elem.className=className;

}else if( (' '+cn+' ').indexOf(' '+className+' ')===-1){

elem.className= className+' '+cn;

}

}

};

N.removeClass= function(elem, className){if( elem ){var cn =elem.className;

elem.className= cn===className ?

'' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );

}

};

N.hasClass= function(elem, className){if( elem &&elem.className ){return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;

}return false;

};

N.toggleClass= function(elem, className){

N.hasClass(elem, className)?N.removeClass(elem, className) : N.addClass(elem, className);

};

}

HTML测试文件的源码如下，自己拿去测试去吧：

利用HTML5的classList API优化样式名className操作

默认字体和颜色是这样的。。。

这是p1，原无class

这是p2，原样式gree bold

这是p3，原样式gree bold

这是p4，原样式gree bold

这是p5，原无class

这是p4，原样式gree bold

css:

p{color:red;font-size:12px;}.gree{color:#00ff00;}.blue{color:#0000ff;}.bold{font-weight:bold;}.small{font-size:18px;}.middle{font-size:32px;}.big{font-size:56px;}

javascript:

function N(id){returndocument.getElementById(id)}

N.trim= String.prototype.trim || function(str){return str.replace(/^s+/, '').replace(/s+$/, '');

};if( document.createElement('p').classList ){

N.addClass= function(elem, className){

elem&& elem.classList &&elem.classList.add(className);

};

N.removeClass= function(elem, className){

elem&& elem.classList &&elem.classList.remove(className);

};

N.hasClass= function(elem, className){return elem && elem.classList &&elem.classList.contains(className);

};

N.toggleClass= function(elem, className){

elem&& elem.classList &&elem.classList.toggle(className);

};

alert('Use html5 classList!');

}else{

N.addClass= function(elem, className){if( elem ){var cn =elem.className;if(!cn){

elem.className=className;

}else if( (' '+cn+' ').indexOf(' '+className+' ')===-1){

elem.className= className+' '+cn;

}

}

};

N.removeClass= function(elem, className){if( elem ){var cn =elem.className;

elem.className= cn===className ?

'' : N.trim( (' '+cn+' ').replace(' '+className+' ', ' ') );

}

};

N.hasClass= function(elem, className){if( elem &&elem.className ){return (' '+elem.className+' ').indexOf(' '+className+' ') > -1;

}return false;

};

N.toggleClass= function(elem, className){

N.hasClass(elem, className)?N.removeClass(elem, className) : N.addClass(elem, className);

};

}

N.addClass(N('p1'), 'blue');

N.removeClass(N('p3'), 'bold');

N.toggleClass(N('p4'), 'gree');

N.toggleClass(N('p4'), 'middle');

N.toggleClass(N('p5'), 'big');

N.addClass(N('p6'), 'small');

个人在Chrome 22、Firefox 15、IE6,7,8,9下测试均没有问题，其他浏览器未测试。。。

其中发现IE9也没有classList API，IE6,7,8更不用说了。