今天來練習提高網頁效能的方法一，用 JS 置換 class。
我們做一個 checkbox ，可以使用加上 class 的方式，來呈現 checked 效果。

圖片一：

圖片二（ checked ）：

說明：
我們用 sprite 的方式，來切換“部分”背景圖片，製造圖片切換的效果。而不需要重新載入一個圖片進行切換。

<h1>戳我戳我</h1>
<div class="sampleClass"></div>

.sampleClass {
  width: 300px;
  height: 330px;
  background: url('https://image.freepik.com/free-vector/check-and-cross-signs-paint-design_1102-228.jpg') no-repeat;
  background-position: 100% 50%;
  background-size: cover;
} 

.active {
  background-position: 0% 50%;
}

說明：
使用 className 這個屬性，抓出元素的 class 名稱字串，再去針對字串處理加減 class 來達到效果。而下面的程式碼用 includes 去判斷是否是 checked 的狀態，也就是有加上 active 的 class，如果有就切換回原本的名稱，如果沒有就加上 active。簡單吧。

var checkBar = document.getElementsByTagName("DIV")[0]

checkBar.addEventListener('click', () => {
  if (checkBar.className.includes('active')) {
    checkBar.className = 'sampleClass'
  } else {
    checkBar.className += ' active'
  }
})