如果需要改變元素的許多樣式，透過程式方式逐一設定並非好的方式，簡便的方式是定義樣式表，並透過選擇器（selector）來符合元素，直接使用樣式表改變元素的多個樣式。元素的class屬性是來為元素作分組，也經常作為樣式表套用的依據，透過操作元素的className特性，是改變樣式套用最常用的一個方式。
class屬性可以設罝多個類別，比較麻煩的地方在於，若有多個類別設定，類別與類別之間，必須是空白作為區隔，所以，若你想確定class屬性中是否設置了某個類別，則必須剖析這個以空白作區隔的字串，若要新增或刪除類別，必須修改這個字串。
下面這個範例示範了測試類別是否存在、新增、刪除與切換類別的三個函式：
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style type="text/css">
.released {
border-width: 1px;
border-color: red;
border-style: dashed;
}
.pressed {
border-width: 5px;
border-color: black;
border-style: solid;
}
</style>
<script type="text/javascript">
window.onload = function() {
function hasClass(element, clz) {
var clzs = element.className;
if(!clzs) {
return false;
}
if(clzs === clz) {
return true;
}
return clzs.search('\\b' + clz + '\\b') !== -1;
}
function addClass(element, clz) {
if(!hasClass(element, clz)) {
if(element.className) {
clz = ' ' + clz;
}
element.className += clz;
}
}
function removeClass(element, clz) {
element.className = element.className.replace(
new RegExp('\\b' + clz + '\\b\\s*', 'g'), '');
}
function toggleClass(element, clz1, clz2) {
if(hasClass(element, clz1)) {
removeClass(element, clz1);
addClass(element, clz2);
}
else if(hasClass(element, clz2)) {
removeClass(element, clz2);
addClass(element, clz1);
}
}
document.getElementById('logo').onclick = function() {
toggleClass(this, 'released', 'pressed');
};
};
</script>
</head>
<body>
<img id="logo" class='released'
src="../../images/caterpillar_small.jpg">
</body>
</html>