คุณสมบัติ dataset

ในภาษา HTML อนุญาตให้เพิ่มแอตทริบิวต์ของตนเอง ลงในแท็กได้ โดยต้องขึ้นต้นด้วย data-, ตามด้วยชื่อแอตทริบิวต์ใดๆ ก็ได้ เพื่อเข้าถึงแอตทริบิวต์ดังกล่าวผ่าน JavaScript จะใช้คุณสมบัติพิเศษ dataset

ไวยากรณ์

element.dataset.name;

ตัวอย่าง

ลองอ่านค่าของแอตทริบิวต์:

<div data-cost="1000"></div>

let elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

ผลลัพธ์จากการเรียกใช้โค้ด:

'1000'

ตัวอย่าง

ลองเปลี่ยนค่าของแอตทริบิวต์:

<div data-cost="1000"></div>

let elem = document.querySelector('div');
elem.dataset.cost = '2000';

ผลลัพธ์ที่ได้ โค้ดจะเปลี่ยนเป็นดังนี้:

<div data-cost="2000"></div>

ดูเพิ่มเติม

เมธอด getAttribute,
ซึ่งใช้ดึงค่าแอตทริบิวต์
เมธอด setAttribute,
ซึ่งใช้กำหนดค่าแอตทริบิวต์