# 差別在哪？ classList 和 className

###### tags: `JacaScript`

[CodePen 示範](https://codepen.io/J_u_d_y/pen/poxOoOo?editors=1011)

兩者都是屬性 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)

:::info
注意：雙引號裡面的 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` 的寫法差異。

:::info
而且一樣要注意，雙引號裡面不可以有點 `“.”`，直接寫上 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](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](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](https://www.w3schools.com/jsref/prop_element_classlist.asp)
>

> **W3School : HTML DOM Element className**
[https://www.w3schools.com/jsref/prop_html_classname.asp](https://www.w3schools.com/jsref/prop_html_classname.asp)