iT邦幫忙

2021 iThome 鐵人賽
DAY 0
0
自我挑戰組

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

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

13th鐵人賽
616 瀏覽

  • 分享至 

  • 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 篇
  1. 26
    [Day 26]從零開始學習 JS 的連續-30 Days---冒泡與捕捉事件
  2. 27
    [Day 27]從零開始學習 JS 的連續-30 Days---BOM-瀏覽器物件模型(上)
  3. 28
    [Day 28]從零開始學習 JS 的連續-30 Days---BOM-瀏覽器物件模型(下)
  4. 29
    [Day 29]從零開始學習 JS 的連續-30 Days---網頁座標及應用
  5. 30
    [Day 30]從零開始學習 JS 的連續-30 Days---連續30天的"遺憾賽程"!!
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
430 組
團體組數
14 組
累計文章數
3395 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 17th鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙