iT邦幫忙

2021 iThome 鐵人賽

DAY 0
0
自我挑戰組

從零開始學習 JS 的連續-30 Days-系列 第 19

[Day 19]從零開始學習 JS 的連續-30 Days---data- 屬性

  • 分享至 

  • xImage
  •  

data- 屬性

  1. data- 屬性 :
    在 HTML 標籤中可以放入自創的屬性,目的是去綁定 DOM 與資料以及驗證資料。
  2. 語法:
    data- + 自訂屬性名稱 = "值"
    例如:data-pets = "cat"、data-fruit = "apple"。
  3. 而若要撈出所有 data- 開頭屬性的值,使用 JS 選取 DOM,然後加上 .dataset 的語法在後面,用 console.log 去查就會得到一組物件。


如上圖所示 **data-**屬性應用。

資料初始化格式

  1. 先將HTML格式做出基本架構。
  2. JS 設定 data 值。(假設值方便之後編寫程式。)
  3. 使用 function 功能搭配 forEach 迴圈組件資料。
  4. 使用 innerHTML 新增資料標籤。

今天就到這結束。


上一篇
[Day 18]從零開始學習 JS 的連續-30 Days---網路請求POST
下一篇
[Day 20]從零開始學習 JS 的連續-30 Days---todolist 待辦事項
系列文
從零開始學習 JS 的連續-30 Days-30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言