HTML में कस्टम एट्रिब्यूट का उपयोग कैसे करें

HTML में आप कस्टम एट्रिब्यूट बना सकते हैं। फिर आप उन एट्रिब्यूट को स्टाइल करने के लिए CSS का उपयोग कर सकते हैं, या उनके व्यवहार को नियंत्रित करने के लिए JavaScript का उपयोग कर सकते हैं।

आप अपने कस्टम एट्रिब्यूट को जो चाहें नाम दे सकते हैं, हालांकि, कस्टम एट्रिब्यूट नामों के पहले data- लेबल होना आवश्यक है:

<tag data-custom-attribute-name="value">Content</tag>

उदाहरण के लिए, मान लें हमारे पास "Apple" नामक एक फूड एलिमेंट है। जब कोई उपयोगकर्ता इस पर क्लिक करता है, तो हम एक पॉपअप डायलॉग बॉक्स में दिखाना चाहते हैं कि यह किस प्रकार का भोजन है।

ऐसा करने के लिए हम food-type नामक एक कस्टम एट्रिब्यूट बनाएंगे (याद रखें data- लेबल) और इसे <div> एलिमेंट में जोड़ देंगे जिसमें Apple टेक्स्ट है:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit"> Apple </div>

और वह जावास्क्रिप्ट जो इस सुविधा को काम करती है:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

यहां एक डेमो है।

HTML कोड कैसे काम करता है:

• सबसे पहले, हमने <div> एलिमेंट में एक onclick एट्रिब्यूट जोड़ा। यह एक इवेंट एट्रिब्यूट है जो एक इवेंट लिसनर अटैच करता है जो सुनता है... आपने सही अनुमान लगाया, क्लिक!
• फिर हम onclick एट्रिब्यूट को showDetailsBox(this) का एट्रिब्यूट मान असाइन करते हैं।
• showDetailsBox() उस जावास्क्रिप्ट फ़ंक्शन का नाम है जिसे Apple टेक्स्ट एलिमेंट पर क्लिक करते ही कॉल किया जाता है।
• (this) का this भाग एक आर्गुमेंट है जो उस ऑब्जेक्ट को संदर्भित करता है जिससे यह संबंधित है (this शुरुआती लोगों के लिए थोड़ा उन्नत है, अगर आप नहीं समझते तो ठीक है)।
• id एक बिल्ट-इन HTML एट्रिब्यूट है जिसका उपयोग HTML एलिमेंट्स के लिए एक यूनिक id निर्दिष्ट करने के लिए किया जाता है। इस मामले में, हमारा यूनिक id apple है।

जावास्क्रिप्ट कोड कैसे काम करता है यह इस HTML ट्यूटोरियल के दायरे से बाहर है, इसलिए मैं आपको एक सरलीकृत व्याख्या दूंगा:

जब onclick इवेंट एट्रिब्यूट द्वारा showDetailsBox() फ़ंक्शन को कॉल किया जाता है, तो यह अपना कोड ब्लॉक { ... } निष्पादित करता है:

function showDetailsBox(food) { ... }

कोड ब्लॉक के अंदर पहली लाइन पर, जावास्क्रिप्ट कस्टम data-food-type एट्रिब्यूट वाले किसी भी HTML एलिमेंट को चुनता है, और इसे (और इसके एट्रिब्यूट मान को) foodType नामक वेरिएबल को असाइन करता है:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") ... }

दूसरी लाइन पर हम बिल्ट-इन alert() मेथड चलाते हैं (जो पॉपअप डायलॉग बॉक्स को संकेत देता है और उसे foodType का मान प्रदर्शित करने के लिए कहता है जो निश्चित रूप से fruit है:

function showDetailsBox(food) { const foodType = food.getAttribute("data-food-type") alert(food.innerHTML + " is a " + foodType) }

चिंता न करें यदि आप ऊपर दिए गए पूरे कोड उदाहरण को पूरी तरह से नहीं समझते हैं, तो पचाने के लिए बहुत कुछ है, खासकर शुरुआती के लिए। अभ्यास के साथ, यह समझ में आएगा!

HTML एट्रिब्यूट के बारे में अधिक विस्तृत जानकारी के लिए, मैं MDN वेब डॉक्स HTML एट्रिब्यूट रेफरेंस में खोज करने की सलाह देता हूं।

महत्वपूर्ण: महत्वपूर्ण सामग्री को डेटा एट्रिब्यूट के अंदर स्टोर न करें जो दृश्यमान और सुलभ होनी चाहिए, क्योंकि सहायक तकनीकें कभी-कभी उन्हें एक्सेस नहीं करती हैं। सर्च क्रॉलर भी डेटा एट्रिब्यूट मानों को इंडेक्स नहीं कर सकते — इसलिए यहां कोई महत्वपूर्ण SEO सामग्री न डालें।