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){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); }; }
HTML测试文件的源码如下，自己拿去测试去吧：
<html> <head> <title>利用HTML5的classList API优化样式名className操作</title> <meta http-equiv="content-type" content="text/html;charset=utf-8"> </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> </body> </html>
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){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');
个人在Chrome 22、Firefox 15、IE6,7,8,9下测试均没有问题，其他浏览器未测试。。。
其中发现IE9也没有classList API，IE6,7,8更不用说了。
本文来自flm000的博客，原文地址：http://blog.csdn.net/flm000/article/details/8069944