Javascript 30

DAY01

data-* 標籤屬性

網頁製作中，越來越多需求要把一些資料 放到標籤內，這是可以使用 data-*， 其中的 * 是由你定義的字串名稱(不可以包含大寫)，例如你以這樣用。

• 定義資料標籤 data-*

  <div data-key="87">A</div>
  <div data-size="xl">XL</div>
  

• 存取資料標籤的資料 .dataset

  document.querySelector('div[data-key="87"]').dataset // {key: "87"}
  
  document.querySelector('div[data-key="87"]').dataset.key // 87
  

---

操作 class

• 擷取標籤所有 class

  document.querySeletor('div[data-key="87"]').classList
  

• 新增 classList.add('className')
• 移除 classList.remove('className')

---

監聽 css transition 動作