data-class
、data-time
、data-required
)
*
這名字可以包含小寫字母、數字、破折號(-)、句點(.)、冒號(:)、下底線(_)dataClassNo
⇒ data-class-no
element.dataset.class
、element.dataset[class]
來取到值element.dataset.class === ‘317’
來 設定已經有的屬性的值delete element.dataset.class
來刪除屬性dataset
屬性
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'}
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
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