คุณสมบัติ dataset

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

ไวยากรณ์

javascriptelement.dataset.name;

ตัวอย่าง

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

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

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

console.log(res);

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

javascript'1000'

ตัวอย่าง

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

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

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

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

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

ดูเพิ่มเติม