操作 class 屬性

如果需要改變元素的許多樣式，透過程式方式逐一設定並非好的方式，簡便的方式是定義樣式表，並透過選擇器（selector）來符合元素，直接使用樣式表改變元素的多個樣式。

元素的 class 屬性是來為元素作分組，也經常作為樣式表套用的依據，透過操作元素的 className 特性，是改變樣式套用最常用的一個方式。

沒有 classList 特性前

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>

按我觀看結果。

使用 classList 特性

HTML5 的 DOM 元素具有 classList 特性，是 DOMTokenList 實例，現代瀏覽器都支援，以上函式相對應的方法分別是 contains、add 與 remove，也具有 replace 可以指定取代名稱，例如：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <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 class='released' src="images/caterpillar.jpg">  

<script type="module">
    function switchClass(elem, clz1, clz2) {
        let clzList = elem.classList;
        if(clzList.contains(clz1)) {
            clzList.replace(clz1, clz2);
        }
        else if(clzList.contains(clz2)) {
            clzList.replace(clz2, clz1);
        }
    }

    document.querySelector('img').addEventListener('click',
        evt => switchClass(evt.target, 'released', 'pressed'), false);
</script>  

</body>
</html>