iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0

理解&說明

  • data-* 是一種 html 的自訂資料屬性
  • dataset 屬性只能讀取(JS讀取在html中賦予的屬性),不能寫入(用寫JS給予值)
  • 增加一個dataset屬性:在 html 標籤中寫 data-* (例如:data-classdata-timedata-required)
    • -* 這名字可以包含小寫字母、數字、破折號(-)、句點(.)、冒號(:)、下底線(_)
    • 跟駝峰是寫法轉換的方法:dataClassNodata-class-no
  • 讀取dataset值
    • 在JavaScript中透過(例如) element.dataset.classelement.dataset[class] 來取到值
  • 設定dataset值
    • 設置的屬性值都會被轉成字串
    • 在JavaScript中 利用(例如) element.dataset.class === ‘317’ 來 設定已經有的屬性的值
    • 在JavaScript中 利用(例如) delete element.dataset.class 來刪除屬性

範例

  1. 增加、讀取 dataset 屬性
    • 第一個console:先來看看直接取出dataset會長怎麼樣
    • 第二個console:想要取到 data-class-no,在JS中要寫成駝峰式寫法,也就是 classNo 才能讀得到。
<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
				let classNumber = document.querySelector('#classNumber').dataset.classNo
        console.log(datasetObj)
        console.log(classNumber)
    </script>
  </body>
</html>

// 317
// {classNo: '317',teacher: 'Sue'}
  1. 設定 dataset 屬性(修改)

要用 document.querySelector('#classNumber').dataset.teacher 這樣的方式,去修改 teacher 的值。

<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
        let teacher= document.querySelector('#classNumber').dataset.teacher
        teacher = 'Lee'
        console.log(datasetObj)
        console.log(teacher)
        document.querySelector('#classNumber').dataset.teacher = 'Lee'
        console.log(datasetObj)
        console.log(teacher)
    </script>
  </body>
</html>

// {classNo: '317',teacher: 'Sue'}
// Lee
// {classNo: '317',teacher: 'Lee'}
// Lee
  1. 設定 dataset 屬性(刪除)

一樣要用 document.querySelector('#classNumber').dataset.teacher 這樣的方式,取到 teacher 的值後再刪除。

<html>
  <body>
		<div id="classNumber" data-class-no="317" data-teacher="Sue">
		    dataset 測試用
		</div>

    <script>
				let datasetObj= document.querySelector('#classNumber').dataset
        let teacher= document.querySelector('#classNumber').dataset.teacher
				delete teacher
        console.log(datasetObj)
        delete document.querySelector('#classNumber').dataset.teacher
        console.log(datasetObj)
    </script>
  </body>
</html>

// {classNo: '317',teacher: 'Sue'}
// {classNo: '317'}

結語

想當初我在維護專案,第一次碰到dataset時,google了很久 data-item 之類的關鍵字,但都找不到什麼資訊,原來是我查錯了,data-… 那都是前輩們自己定義的名字,這就像上網google 一個 class 的名字一樣XD;搞清楚這是什麼、到知道什麼時候該用,也花了一些時間。

這次就整理起來,實驗過後我自己也更清楚,dataset都是些什麼東西了!

參考

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset


上一篇
關於正規表達式(有表單驗證寫法)
下一篇
關於非同步-1
系列文
前端菜雞_賀周歲成長日誌31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言