在網頁的互動效果中，常常是當使用者符合了某個條件時，畫面上的元素產生令人驚喜的變化，這些變化可簡單可複雜，小至只有顏色的改變，大至元素形狀或位置的改變，目前學習到操作樣式的改變有兩種途徑：

1. HTMLElement.style：只能針對指定的屬性做樣式修改，如果變化比較複雜，使用classList應該是比較好的做法

2. Element.classList： 是Element物件定義的一個特性，它的值是一個可迭代的類陣列物件，並且有以下四種方法可以使用

   • add()： 增加指定的class name
   • remove() ：移除指定的class name
   • contains() ：確認是否包含括號內給定的class name
   • toggle() ：有包含指定的 class name就移除，沒有的話就加上去

知道這些語法之後，腦袋一直浮現部落格常見的白天黑暗模式的切換鈕，所以決定用codepen練習一下。

首先我們先準備基本的切換鈕和示範用文章，下面是 HTML 結構：

<!--切換鈕-->
<div>
  <div class="bar">
    <span class="icon moon"><i class="far fa-moon"></i></span>
    <span class="icon sun"><i class="fas fa-sun"></i></span class="icon">
    <span class="base-mode"></span>
  </div>
</div>
<!--文章-->
<article>
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rerum ipsam animi maiores, commodi nostrum eos. Lorem ipsum dolor sit amet.</p>
</article>

用CSS簡單美化一下變成這樣：

以下是待會要利用JS動態加到元素上的樣式

.dark {
  background-color: #222;
  color: #fff;
  transition: background-color 1s ease;
}

.slide {
  transform: translateX(60px);
  transition: all .5s;
}

前置準備好之後，我們要進入關鍵步驟了！來寫 JS ～

步驟 1: 先選取元素，並綁上監聽器

const button = document.querySelector('button');
button.addEventListener('click', changeMode);

步驟 2: 點擊button時，button會滑動

function changeMode(e) {
  if (e.target.tagName === 'BUTTON') {
    e.target.classList.toggle('slide')
    
    // 下一個步驟的程式碼
  }  
}

步驟 3: 改變背景和文字顏色

if (document.body.classList.contains('dark')) {
    document.body.classList.remove('dark')
} else {
    document.body.classList.add('dark')
}

//上面的if-else 可以用下面的toggle整個替代
document.body.classList.toggle('dark')

這樣就完成了～

成品

雖然挺陽春的，但可以用學到的語法做出一個小小小功能真是太酷了～感覺就像彈吉他從練個別和絃到實際彈出一首完整的歌一樣～讓人心情愉悅～

參考資料：

JavaScript大全