data-* एट्रिब्यूट्स आपको किसी भी HTML तत्व पर कस्टम, निजी डेटा संग्रहीत करने देते हैं। यह DOM पर मेटाडेटा संलग्न करने का एक मानक तरीका है जिसे JavaScript पढ़ सकता है, बिना गैर-मानक विशेषताओं या कक्षाओं का दुरुपयोग किए।
html
Edit
data-* एट्रिब्यूट्स आपको किसी भी HTML तत्व पर कस्टम, निजी डेटा संग्रहीत करने देते हैं। यह DOM पर मेटाडेटा संलग्न करने का एक मानक तरीका है जिसे JavaScript पढ़ सकता है, बिना गैर-मानक विशेषताओं या कक्षाओं का दुरुपयोग किए।
Edit
dataset के माध्यम से JavaScript में पढ़ना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-* क्लाइंट-साइड JS के लिए DOM में सर्वर डेटा पास करने का (बिना किसी अतिरिक्त API कॉल के), इवेंट डेलिगेशन सेट करने, और CSS स्थिति चलाने का स्वच्छ, मानक-अनुपालन तरीका है — बिना गैर-मानक विशेषताओं के आविष्कार के जो HTML को अमान्य बनाएंगे।
बड़े या संवेदनशील डेटा को वहां संग्रहीत न करें; यह मार्कअप में दृश्यमान है।