जावास्क्रिप्ट में कस्टम एट्रिब्यूट्स
HTML में आपको अपने कस्टम एट्रिब्यूट्स टैग में जोड़ने की अनुमति है।
ऐसे एट्रिब्यूट्स data- से शुरू होने चाहिए,
और उसके बाद कोई भी एट्रिब्यूट नाम आ सकता है
जो आपके लिए सुविधाजनक हो।
कस्टम एट्रिब्यूट्स का उपयोग कई अलग-अलग तरीकों से किया जा सकता है। इनमें से कई तरीकों को हम ट्यूटोरियल में आगे सीखेंगे, और आप स्वयं भी भविष्य में और अधिक तरीके खोज सकते हैं।
ऐसे एट्रिब्यूट्स तक पहुंचने का तरीका मानक नहीं है।
आप केवल एलिमेंट के समान नाम वाले प्रॉपर्टी से एक्सेस नहीं कर सकते
जैसा कि हमने पहले किया था,
बल्कि एक विशेष प्रॉपर्टी dataset का उपयोग करना चाहिए,
जिसके बाद डॉट के माध्यम से एट्रिब्यूट का नाम
data- के बिना लिखा जाता है। उदाहरण के लिए,
यदि हमारा एट्रिब्यूट data-test कहलाता है,
तो इसे एक्सेस करने के लिए हम elem.dataset.test लिखेंगे,
जहाँ elem - हमारे एलिमेंट के साथ वेरिएबल है।
आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास यह एलिमेंट दिया गया है:
html<div id="elem" data-num="1000"></div>
आइए इसके data-num एट्रिब्यूट का मान स्क्रीन पर प्रिंट करें:
javascriptlet elem = document.querySelector('#elem');
console.log(elem.dataset.num); // 1000 प्रिंट करेगा
और अब इस एट्रिब्यूट को एक अलग मान निर्दिष्ट करते हैं:
javascriptlet elem = document.querySelector('#elem');
elem.dataset.num = 123;
निम्नलिखित कोड दिया गया है:
html<div id="elem" data-text="str">text</div>
ऐसा करें कि डिव पर क्लिक करने पर
उसके टेक्स्ट के अंत में उसके data-text
एट्रिब्यूट की सामग्री जुड़ जाए।
डिव्स दिए गए हैं, जिनमें data-num एट्रिब्यूट में
उनका क्रमिक नंबर होता है:
html<div data-num="1">text</div>
<div data-num="2">text</div>
<div data-num="3">text</div>
<div data-num="4">text</div>
<div data-num="5">text</div>
ऐसा करें कि किसी भी डिव पर क्लिक करने पर उसके अंत में उसका क्रमिक नंबर लिखा जाए।
एक बटन दी गई है। ऐसा करें कि यह बटन उस पर किए गए क्लिकों की गिनती करे, उन्हें किसी कस्टम एट्रिब्यूट में लिखे। दूसरे बटन पर क्लिक करने पर स्क्रीन पर यह प्रिंट होना चाहिए कि पहले बटन पर कितने क्लिक किए गए थे।
एक इनपुट दिया गया है:
html<input id="elem" data-length="5">
इस इनपुट में data-length एट्रिब्यूट में
वर्णों की वह संख्या होती है जो इनपुट में दर्ज करनी होती है।
ऐसा करें कि फोकस खोने पर, यदि दर्ज किए गए वर्णों की संख्या
निर्दिष्ट संख्या से मेल नहीं खाती है,
तो इसके बारे में एक संदेश प्रिंट हो।
एक इनपुट दिया गया है:
html<input id="elem" data-min="5" data-max="10">
इस इनपुट में data-min और
data-max एट्रिब्यूट्स में एक रेंज होती है।
ऐसा करें कि फोकस खोने पर, यदि दर्ज किए गए वर्णों की संख्या
इस रेंज में नहीं आती है,
तो इसके बारे में एक संदेश प्रिंट हो।