HTML Data Attributes
In this page:
<tagname data-name="value">content</tagname>
<script>
element.dataset.name;
</script>Custom Data Attributes
Data attributes आपको वैलिडेशन नियमों को तोड़े बिना स्टैंडर्ड HTML टैग्स के अंदर कस्टम जानकारी स्टोर करने देते हैं। हर कस्टम data attribute को data- प्रीफिक्स से शुरू होना चाहिए, उसके बाद आपका कस्टम नाम lowercase में आना चाहिए।
- अपने कस्टम data attributes के लिए स्पष्ट, विवरणात्मक नाम चुनें, जैसे data-tool-type या data-status।
- Accepted values:
- data-* — name is data- plus lowercase letters, digits, hyphens
- Value — any string
- Read via element.dataset (camelCase) or getAttribute
उदाहरण: Custom Data Attributes
<div data-tool-type="calculator" data-status="active">Widget</div>CSS के साथ Data Attributes पढ़ना
आप स्टैंडर्ड attribute सिलेक्टर्स का उपयोग करके अपने स्टाइलशीट्स के अंदर कस्टम data attributes को टार्गेट कर सकते हैं, और यहाँ तक कि CSS content प्रॉपर्टी का उपयोग करके उनकी वैल्यूज़ को टेक्स्ट के रूप में स्क्रीन पर भी दिखा सकते हैं।
उदाहरण: Reading Data Attributes with CSS
<style>
[data-status="active"] {
border: 2px solid green;
}
</style>
<div data-status="active">Active widget</div>JavaScript में dataset से डेटा पढ़ना
JavaScript dataset प्रॉपर्टी का उपयोग करके कस्टम data attributes को आसानी से पढ़ और मॉडिफाई कर सकता है। ब्राउज़र अपने-आप आपके हाइफनेटेड data- एट्रिब्यूट्स को camelCase ऑब्जेक्ट प्रॉपर्टीज़ में बदल देता है।
उदाहरण: Reading Data with dataset in JavaScript
<div id="widget" data-tool-type="calculator"></div>
<script>
console.log(document.getElementById('widget').dataset.toolType);
</script>Dynamic State Toggles
आप data attributes का उपयोग अपने पेज पर इंटरैक्टिव स्टेट्स मैनेज करने के लिए कर सकते हैं, जैसे active/inactive सेटिंग्स या dark/light मोड्स के बीच टॉगल करना, सिंपल स्क्रिप्ट्स और स्टाइल नियमों का उपयोग करके।
उदाहरण: Dynamic State Toggles
<button data-state="inactive" onclick="this.dataset.state = 'active'">Toggle</button>Accessibility और ARIA संबंधी चिंताएँ
जहाँ data attributes कस्टम स्टाइलिंग और स्क्रिप्टिंग के लिए बेहद उपयोगी हैं, वहीं उनका कोई सिमैंटिक अर्थ बिल्कुल नहीं होता।
स्क्रीन रीडर्स जैसे असिस्टिव डिवाइसेज़ आपके data attributes को पूरी तरह इग्नोर कर देंगे, इसलिए अपने इंटरैक्टिव एलिमेंट्स को एक्सेसिबल बनाए रखने के लिए आपको स्टैंडर्ड ARIA attributes का उपयोग करना होगा।
उदाहरण: Accessibility and ARIA Concerns
<button data-expanded="false" aria-expanded="false">Show more</button>Chapter Quiz — Complete all 10 topics to unlock
0/10 topics done
Complete these topics first: