iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 27
0
Modern Web

一個 JS 學習者的日常系列 第 27

一個 JS 學習者的日常 day 26

今天來練習提高網頁效能的方法一,用 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'
  }
})


上一篇
一個 JS 學習者的日常 day 25
下一篇
一個 JS 學習者的日常 day27
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言