差別在哪？ classList 和 className

tags: JacaScript

CodePen 示範

兩者都是屬性 property，但是有一些細微差異。

classList

可以用來取得元素 class ，經常搭配下列幾種方法 (method )使用：

add：

加上class。可以添加多個 class。

remove：

移除 class

toggle：

對同一個 class 名稱進行 add 和 remove 狀態的切換。若目前此 class 名稱不存在就添加；若存在就移除。

contains：

檢查指定的 class 屬性 之中是否有包含特定名稱的 class (Checks if specified class value exists in class attribute of the element)

注意：雙引號裡面的 class 名稱不可以有「點」”.”，因為是添加在 HTML 的 class=”” 裡面的內容，直接寫上名稱就好。

<div class="red">這是紅色</div>
<button class="do-toggle">點擊我切換：可見 / 不可見</button>
<button class="do-alert">點擊我顯示 alert</button>
<button class="rm-red">點擊我移除 red class</button>
<button class="add-fz">點擊我添加 font-size: 30px</button>

const div = document.querySelector("div");

div.classList.remove("red");
div.classList.add("fz-30");

// 如果已經存在 class visible 就移除，若沒有就添加
//  if visible is set remove it, otherwise add it
div.classList.toggle("visible");

//因為 div 確實帶有 red 這個 class，所以警告視窗會跳出顯示 true 
alert(div.classList.contains("red")); 


//加上多個 class 
//add multiple classes
div.classList.add("yellow","green"); 

className

className 和 classList 乍看很相似，但是，className 是直接「覆蓋掉」、「取代掉」原有的 class ，

比較像是替元素「設置 (set)」class ，而不是添加 (add)。

Set 設置 class 名稱

className 是在等號右邊的字串雙引號裡面，放入指定的 class 名稱

Set the class attribute for an element

element.className = "myStyle";

可以比較一下跟前面 classList 的寫法差異。

而且一樣要注意，雙引號裡面不可以有點 “.”，直接寫上 class 名稱就好。

Get 取得 class 名稱後作為值存入變數中

Get the class attribute of "myDIV"

let value = document.getElementById("myDIV").className;

搭配 if else 在 2 個 class 名稱之間切換 toggle

<h1 class="myStyle">I am a H1 text</h1>
<button class="toggle">className Toggle</button>

const h1 = document.querySelector("h1");
const toggle = document.querySelector("button.toggle");

toggle.onclick = () => {
  if (h1.className == "myStyle") {
    h1.className = "newStyle";
    }else {
    h1.className = "myStyle";
    };
};

不要混淆兩者的 toggle 作法

classList 要做到 toggle ，直接搭配 toggle 方法，是對同 1 個 class 名稱，進行添加或是移除的切換，比較像是開關燈 on / off 的狀態切換。

className 要做到 toggle ，無法直接接一個 toggle 方法，是要搭配 if else 判斷式，是在 2 個 class 名稱之間切換。

參考資料

MDN: Element: classList property
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

MDN: Element: className property
https://developer.mozilla.org/en-US/docs/Web/API/Element/className

W3School : HTML DOM Element classList
https://www.w3schools.com/jsref/prop_element_classlist.asp

W3School : HTML DOM Element className
https://www.w3schools.com/jsref/prop_html_classname.asp