data-* विशेषताहरू कुनै पनि HTML तत्वमा कस्टम, निजी डेटा भण्डार गर्न दिन्छ। तिनीहरू DOM मा मेटाडेटा जोडिने मानक तरिका हुन् जुन JavaScript ले पढ्न सक्छ, गैर-मानक विशेषताहरू वा क्लासहरूको दुरुपयोग नगरी।
html
Edit
dataset मार्फत तिनीहरूलाई पढ्नुहोस्const btn = document.querySelector("button");
btn.dataset.id; // "42"
btn.dataset.userRole; // "admin" ← kebab-case becomes camelCase
btn.dataset.isActive; // "true" ← always a STRING
// writing updates the attribute too
btn.dataset.id = "99"; // sets data-id="99" in the DOM
दुई मुख्य नियम: data-user-role लाई dataset.userRole को रूपमा पहुँच गरिन्छ (ड्यासहरू camelCase मा परिणत हुन्छ), र प्रत्येक मान एक स्ट्रिङ्ग हुन्छ — आवश्यकतानुसार परिणत गर्नुहोस् (Number(btn.dataset.id), btn.dataset.isActive === "true")।
button[data-is-active="true"] { font-weight: bold; }
button::after { content: attr(data-id); } /* display the value */
list.addEventListener("click", (e) => {
const id = e.target.dataset.id; // know which item was clicked
if (id) deleteItem(id);
});
प्रत्येक तत्वमा id भण्डार गर्नु मानस भान्डामा एक श्रोता सबै वस्तुहरू ह्यान्डल गर्न सक्छ।
data-* सर्भर डेटालाई DOM मा क्लायन्ट-साइड JS मा पास गर्ने स्वच्छ, मानक-अनुरूप तरिका हुन् (अतिरिक्त API कल बिना), ईभेन्ट प्रतिनिधिमण्डन तार गर्न, र CSS स्थिति चलाउन — गैर-मानक विशेषताहरू आविष्कार नगरी जसले HTML लाई अमान्य बनाएर दिन्छ।
त्यहाँ ठूलो वा संवेदनशील डेटा भण्डार गर्नुहोस्, तद्यपि; यो मार्कअप मा दृश्यमान छ।