利用HTML5的classList API优化对样式名className的操作
HTML5的classList API提供了以下几个比较有用的控制CSS样式名的方法：
<!DOCTYPE html><html><head><title>利用HTML5的classList API优化样式名className操作</title><meta http-equiv="content-type" content="text/html;charset=utf-8"><style type="text/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;}</style></head><body><p>默认字体和颜色是这样的。。。</p> <p id="p1">这是p1，原无class</p><p id="p2" class="gree bold">这是p2，原样式gree bold</p><p id="p3" class="gree bold">这是p3，原样式gree bold</p><p id="p4" class="gree bold">这是p4，原样式gree bold</p><p id="p5">这是p5，原无class</p><p id="p6" class="gree bold">这是p4，原样式gree bold</p><script type="text/javascript">function N(id){return document.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');</script></body></html>个人在Chrome 22、Firefox 15、IE6,7,8,9下测试均没有问题，其他浏览器未测试。。。其中发现IE9也没有classList API，IE6,7,8更不用说了。