वैश्विक एट्रिब्यूट और data-*

हर जगह काम करने वाले एट्रिब्यूट का लाभ उठाएं और अपना डेटा HTML में संग्रहीत करें।

7 मिनट · 3 प्रश्न

कुछ एट्रिब्यूट किसी भी एलिमेंट पर काम करते हैं: ये वैश्विक एट्रिब्यूट हैं। आप पहले से 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";

ज्ञान जांच

सुनिश्चित करें कि आपको इस पाठ के मुख्य बिंदु याद हैं।

1. JavaScript में आप data-user-id एट्रिब्यूट को कैसे पढ़ते हैं?
   • element.dataset.userId
   • element.dataset.user-id
   • element.data.userId
   • element.getData("user-id")
2. data-* एट्रिब्यूट किसलिए होते हैं?
   • कस्टम डेटा संग्रहीत करने के लिए जिसे आपका JavaScript पढ़ सके
   • पेज के डेटा की लोडिंग तेज़ करने के लिए
   • जब कोई फ़ॉर्म सबमिट होता है तब सर्वर पर डेटा भेजने के लिए
3. कौन-सा वैश्विक एट्रिब्यूट किसी एलिमेंट को सिमैंटिक रूप से छिपाता है?
   • hidden
   • invisible
   • display