當前位置：
HTML5的classList API提供了以下幾個比較有用的控制CSS樣式名的方法：
[javascript] view plaincopy
//添加一個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] view plaincopy
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] view plaincopy
<!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更不用說了。
[javascript] view plaincopy
//添加一個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] view plaincopy
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] view plaincopy
<!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更不用說了。
