हर जगह काम करने वाले एट्रिब्यूट का लाभ उठाएं और अपना डेटा HTML में संग्रहीत करें।
इस पाठ को Kodokon में खोलेंकुछ एट्रिब्यूट किसी भी एलिमेंट पर काम करते हैं: ये वैश्विक एट्रिब्यूट हैं। आप पहले से id और class इस्तेमाल करते हैं; अपने टूलबॉक्स में जोड़ें hidden (एलिमेंट छिपाता है), lang (किसी अंश की भाषा बताता है), title (होवर पर टूलटिप) और tabindex (कीबोर्ड फ़ोकस क्रम)।
<p lang="en" title="Original quote">
Stay hungry, stay foolish.
</p>
<div hidden id="cookie-banner" class="banner">
We use cookies.
</div>किसी एलिमेंट से अपना डेटा जोड़ना है? कभी कोई गढ़ा हुआ एट्रिब्यूट न बनाएं: HTML इसी के लिए data-* एट्रिब्यूट आरक्षित रखता है। आप डैश के बाद नाम चुनते हैं, लोअरकेस kebab-case में। सामान्य उपयोग के मामले: एक प्रोडक्ट पहचानकर्ता, एक UI स्थिति, एक कंपोनेंट कॉन्फ़िगरेशन।
<article
class="product-card"
data-product-id="42"
data-category="books"
data-in-stock="true"
>
<h2>HTML for pros</h2>
</article>JavaScript की ओर, ये एट्रिब्यूट dataset प्रॉपर्टी के ज़रिए पढ़े जाते हैं। स्वचालित रूपांतरण से सावधान रहें: HTML kebab-case, JavaScript में camelCase बन जाता है। तो data-product-id को dataset.productId से पढ़ा जाता है। मान हमेशा स्ट्रिंग होते हैं, यहां तक कि "true" या "42" भी।
const card = document.querySelector(".product-card");
console.log(card.dataset.productId); // "42"
console.log(card.dataset.inStock); // "true"
card.dataset.state = "selected";const card = document.querySelector(".product-card");
card.dataset.inStock = "false";
console.log(card.getAttribute("___"));