HTML में Custom Attributes का उपयोग कैसे करें

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 कोड कैसे कार्य करता है:

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

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

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

function showDetailsBox(food) {
  ...
}

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

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

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

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

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

HTML विशेषताओं के बारे में अधिक विस्तृत जानकारी के लिए, मैं MDN वेब डॉक्स HTML विशेषता संदर्भ के माध्यम से खुदाई करने की सलाह देता हूं।

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