HackMD
差別在哪？ classList 和 className
tags: JacaScript
兩者都是屬性 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
