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