用 DOM 改變元素的 Class

懶人包系列。

新增或移除 ClassList

備註：既然 classList 都叫 List 了，就代表可以想成是一個陣列，他不會把整筆 Class 覆寫掉。

新增單個

HTML：

<div>yoyoyo</div>

JavaScript：

const element = document.getElementsByTagName('div')[0]
element.classList.add('block')

Output：

<div class="block">yoyoyo</div>

新增多個

HTML：

<div>yoyoyo</div>

JavaScript：

const element = document.getElementsByTagName('div')[0]
element.classList.add('block', 'inline-block')

Output：

<div class="block inline-block">yoyoyo</div>

移除單個

HTML：

<div class="block">yoyoyo</div>

JavaScript：

const element = document.querySelector('.block')
element.classList.remove('block')

Output：

<div>yoyoyo</div>

移除多個

HTML：

<div class="block inline-block">yoyoyo</div>

JavaScript：

const element = document.querySelector('.block')
element.classList.remove('inline-block', 'block')

Output：

<div>yoyoyo</div>

切換 Class

HTML：

<div class="block inline-block">yoyoyo</div>
<button>Toggle Class</button>

JavaScript：

const element = document.querySelector('.block')
document.querySelector('button').addEventListener('click',
  // 按下按鈕時，切換 class  
  () => element.classList.toggle('inline-block')
)

Output：

把整個 Class 覆寫掉 ClassName

應該不常用，但可以知道一下。

範例一

HTML：

<div class="block">yoyoyo</div>

JavaScript：

const element = document.querySelector('.block')
element.className = 'override-backgroud'

Output：

<div class="override-backgroud">yoyoyo</div>

範例二

<div class="block">yoyoyo</div>

JavaScript：

const element = document.querySelector('.block')
element.className = 'block override-backgroud'

Output：

<div class="block override-backgroud">yoyoyo</div>