क्या मैं HTML टैग में एक कस्टम विशेषता जोड़ सकता हूं?

350

क्या मैं निम्नलिखित की तरह एक HTML टैग में एक कस्टम विशेषता जोड़ सकता हूं?

<tag myAttri="myVal" />
html  custom-attribute 
— lovespring
स्रोत
3
— तामस Czinege
2
— तमस Czinege
— सिरो सांटिल्ली 郝海东 iro iro '' '
यद्यपि उत्तर "हां" कहते हैं, सुनिश्चित करें कि आपके पास विशेषताओं का एक थीम सेट है जो प्लग-इन के साथ उपयोग किए जाने की संभावना है। उदाहरण के लिए: "डेटा- myuniqueattribute।" मैं आमतौर पर किसी भी प्रकार के दो अक्षर संक्षिप्त नाम के साथ "डेटा-" के बाद कुछ भी उपसर्ग करता हूं। उदाहरण के लिए: "data-yscolumntype।" इसे यूनिक रखें।

जवाबों:

189

आप इसे अनुमति देने के लिए अपने DOCTYPE घोषणा (यानी DTD) में संशोधन कर सकते हैं, ताकि [XML] दस्तावेज़ की आवश्यकता हो:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
  <!ATTLIST tag myAttri CDATA #IMPLIED>
]>

#IMPLIEDइसका मतलब यह एक वैकल्पिक विशेषता है, या आप उपयोग कर सकते हैं #REQUIRED, आदि।

अधिक जानकारी DTD - विशेषताओं में है ।

— carillonator
स्रोत
2
बस अपने html फ़ाइल के शीर्ष पर वह सब डाल दें (xHTML 1.0 संक्रमणकालीन ठीक है)
— कारपेंटर
8
शायद मुझे कुछ याद आ रहा है, लेकिन यदि आप इस दृष्टिकोण का पालन करते हैं, तो]> प्रदान किए गए वेब पेज में दिखाई देता है। फ़ायरफ़ॉक्स 3.6 पर मुझे हो रहा है। Alistapart.com/articles/customdtd का यह स्निपेट इस व्यवहार को सत्यापित करने के लिए लगता है: "यदि आप इस लेख के लिए नमूना फ़ाइलों को डाउनलोड करते हैं और फ़ाइल internal.html को मान्य करते हैं, तो आप इसे अपने लिए देख सकते हैं। दुर्भाग्य से, जब आप किसी ब्राउज़र में फ़ाइल प्रदर्शित करते हैं। ,]> स्क्रीन पर दिखाई देता है। इस बग के आसपास कोई रास्ता नहीं है, इसलिए यह दृष्टिकोण सही है। "
— माइक
3
कुछ चीजें जो "]>" दिखावे के साथ मदद कर सकती हैं: फ़ाइल को .xhtml फ़ाइल नाम एक्सटेंशन के साथ सहेजें। फ़ाइल में MIME प्रकार को शामिल करें <meta http-equiv="content-type" content="application/xhtml+xml" />।
— रास
4
जहां तक ​​ब्राउज़र व्यवहार पर विचार किया जाता है, वहां विशेषता को घोषित करना व्यर्थ है। वे डीटीडी नहीं पढ़ते हैं। इसके अलावा, वे आंतरिक उपसमुच्चय (जो यहां उपयोग किया जाता है) को भी ठीक से नहीं छोड़ सकते हैं, जो कि "]>" खानों की व्याख्या करता है। घोषणा केवल औपचारिक सत्यापन के लिए प्रासंगिक होगी, और इसका उपयोग उत्पादन पृष्ठों पर नहीं किया जाना चाहिए।
— जुक्का के। कोर्पेला
32
यह उत्तर केवल XHTML और HTML 4.01 और पुराने पर लागू होता है। यह पूरी तरह से याद आती है कि अब आप अपनी विशेषताओं को बना सकते हैं यदि आप उनके साथ उपसर्ग करते हैं data-।
— ब्रेनटोनस्ट्राइन
300

आप अपनी इच्छानुसार अपने तत्वों में कस्टम विशेषताएँ जोड़ सकते हैं। लेकिन यह आपके दस्तावेज़ को अमान्य बना देगा।

HTML 5 में आपके पास उपसर्ग के साथ कस्टम डेटा विशेषताओंdata- का उपयोग करने का अवसर होगा ।

— Gumbo
स्रोत
169
याद रखें "अमान्य" का अर्थ कुछ भी नहीं है। पृष्ठ ठीक 100% समय प्रदान करेगा।
— जॉन फैरेल
22
वास्तव में "अवैध" के बहुत वास्तविक अर्थ हैं। जैसे यह आपके दस्तावेज़ को quirksmode रेंडरिंग में डाल सकता है। किसी भी दर पर, HTML5 सिद्धांत का उपयोग करें और आप मान्य होंगे।
— ब्रेंटनस्ट्राइन
यहाँ विभिन्न सिद्धांत और संबंधित ब्राउज़र मोड की एक अच्छी तालिका है: hsivonen.fi/doctype/#handling । एचटीएमएल 5 सिद्धांत 2001 के बाद के सभी ब्राउज़रों को (पूर्ण) मानक मोड में बदल देता है। XHTML संक्रमणकालीन और HTML 4 संक्रमणकालीन (विशेष रूप से DTD के बिना) doctypes नहीं करते :)
— Ilya Streltsyn
पवित्र मिठाई मसीह, धन्यवाद। @ जफर सही है लेकिन इससे पठनीयता घटती है।
— नेवरमोर
मेरा दस्तावेज़ अमान्य है वैसे भी, क्योंकि यह बताता है कि मुझे |एक सीएसएस में अनुमति नहीं है href, लेकिन यही Google फ़ॉन्ट्स के लिए आवश्यक है
— पोस्ट सेल्फ
73

नहीं, इससे सत्यापन टूट जाएगा।

HTML 5 में आप कस्टम विशेषताएँ जोड़ सकते हैं / कर सकते हैं। कुछ इस तरह:

<tag data-myAttri="myVal" />
8
लेकिन, मुझे सत्यापन की परवाह नहीं है, मैं सिर्फ यह चाहता हूं कि इसे जावास्क्रिप्ट द्वारा एक्सेस किया जा सकता है।
— प्यार करता है
10
यह निश्चित रूप से काम करेगा। लेकिन जानबूझकर अवैध दस्तावेज बनाना इतना अच्छा विचार नहीं है।
31
अमान्य दस्तावेज़ बनाना एक महान विचार है। Google उन्हें लोड समय को कम करने के लिए बनाता है, कैनवास का उपयोग करने वाली प्रत्येक साइट उन्हें एक बेहतर उपयोगकर्ता अनुभव बनाने के लिए उपयोग करती है, और HTML तत्वों से सार्थक डेटा खींचने के लिए जावास्क्रिप्ट फ्रेमवर्क का उपयोग करना कस्टम विशेषता तकनीक का उपयोग करना बहुत आसान है।
— जॉन फैरेल
3
@ जफर: कैनवस अमान्य नहीं है। यह HTML 4.01 में नहीं है; हालाँकि, यह आगामी HTML5 विनिर्देशन का पूरी तरह से कानूनी हिस्सा है।
— 22
3
आपका क्या मतलब है "अमान्य नहीं"? यह किसी भी स्वीकृत विनिर्देश का हिस्सा नहीं है। एक विनिर्देश के खिलाफ कुछ कैसे मान्य हो सकता है जो मौजूद नहीं है?
— जॉन फैरेल
11

हाँ, आप कर सकते हैं, आपने प्रश्न में ही किया है <html myAttri="myVal"/>:।

— luvieere
स्रोत
2
निर्भर करता है कि आप HTML को किस रूप में परिभाषित करते हैं। मैं तत्वों और विशेषताओं के एक विशिष्ट सेट के साथ HTML को एसजीएमएल पर आधारित भाषा के रूप में सोचता हूं। एक्सएचटीएमएल एक्सएमएल पर एक संस्करण है, जिसमें तत्वों और विशेषताओं का एक विशिष्ट सेट है जो एचटीएमएल की तरह है। जब आप अपनी विशेषताओं का उपयोग करते हैं, तो यह अभी भी XML का SGML है, लेकिन मेरी राय में XHTML का HTML नहीं है।
— डावे मान
इसे एडहॉक एक्सटेंशन के रूप में लें, एक सख्त अर्थ में एक मानक नहीं, लेकिन आवश्यकता के कार्यान्वयन का एक प्रकार है कि यह कस्टम विशेषताएँ शामिल होने पर पार्स करने में विफल नहीं होना चाहिए।
— लूविएरे
2
DouweM: बेशक, हमेशा HTML5 का HTML क्रमांकन होता है, जो न तो SGML है और न ही XML।
— 22
2
और आपने प्रक्रिया में दस्तावेज़ को (अमान्य) तोड़ दिया। अच्छा अभ्यास नहीं।
— कारपेंटर
10 

var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar
<div id="demo" data-myvar="foo">anything</div>
स्निपेट का विस्तार करें

— जसीम डायर
स्रोत
2
कृपया अपने उत्तर में संक्षिप्त विवरण जोड़ें।
— निकोले मिहायलोव
10

हां तुम यह कर सकते हो!

अगला HTMLटैग होने :

<tag key="value"/>

हम उनकी विशेषताओं तक पहुँच सकते हैं JavaScript:

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter

Element.setAttribute()HTMLमौजूद नहीं होने पर विशेषता को टैग में डालें। इसलिए, HTMLयदि आप इसे साथ सेट करने जा रहे हैं, तो आपको इसे कोड में घोषित करने की आवश्यकता नहीं है JavaScript।

key: कोई भी नाम हो सकता है जिसे आप विशेषता के लिए चाहते हैं, जबकि वर्तमान टैग के लिए पहले से ही इसका उपयोग नहीं किया गया है। value: यह हमेशा एक स्ट्रिंग है जिसमें आपको आवश्यकता होती है।

— IgniteCoders
स्रोत
7

आप जावास्क्रिप्ट से गुण सेट कर सकते हैं।

document.getElementById("foo").myAttri = "myVal"
— EWG
स्रोत
4

यहाँ उदाहरण है:

document.getElementsByTagName("html").foo="bar"

यहाँ एक और उदाहरण है कि कैसे बॉडी टैग तत्व में कस्टम विशेषताएँ सेट करें:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

फिर इसके द्वारा विशेषता पढ़ें:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

आप DevTools में कॉनसोल में कोड से ऊपर का परीक्षण कर सकते हैं , जैसे

JS कंसोल, DevTools क्रोम में

— kenorb
स्रोत
1

डेटा-किसी का उपयोग करें, मैं उन्हें बहुत उपयोग करता हूं

<aside data-area="asidetop" data-type="responsive" class="top">
— एरिक बोइलू
स्रोत
आपको data-*जावास्क्रिप्ट से मान कैसे मिलेगा ?
— हारून फ्रेंक
0

एक अन्य दृष्टिकोण, जो साफ है और दस्तावेज को मान्य रखेगा, वह डेटा है जिसे आप किसी अन्य टैग उदा आईडी में चाहते हैं, तब विभाजन का उपयोग करें। 

<html>
<script>
  function demonstrate(){
    var x = document.getElementById("example data").querySelectorAll("input");
    console.log(x);
    for(i=0;i<x.length;i++){
      var line_to_illustrate = x[i].id  + ":" + document.getElementById ( x[i].id ).value;
      //concatenated values
      console.log("this is all together: " + line_to_illustrate); 
      //split values
      var split_line_to_illustrate = line_to_illustrate.split(":");
      for(j=0;j<split_line_to_illustrate.length;j++){
        console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
      }      
    }
  }
</script> 

<body>

<div id="example data">
  <!-- consider the id values representing a 'from-to' relationship -->
  <input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
  <input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
  <input id="3:6" type="number" name="quantity" min="0" max="9" value="5">  
</div>

<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>

</body>
</html>
— CAtoOH
स्रोत
0

आप जोड़ सकते हैं, लेकिन फिर आपको जावास्क्रिप्ट कोड की एक पंक्ति भी लिखनी होगी,

document.createElement('tag');

यह सुनिश्चित करने के लिए कि सब कुछ ठीक हो जाए। मेरा मतलब है इंटरनेट एक्सप्लोरर :)

— defau1t
स्रोत
3
यह प्रासंगिक होगा यदि टैग नाम IE के लिए ज्ञात नहीं है। यहाँ समस्या एक कस्टम विशेषता है, कस्टम टैग नहीं; शब्द "टैग" <tag ...>यहाँ स्पष्ट रूप से किसी भी HTML टैग का मतलब है।
— जुक्का के। कोर्पेला
क्या यह XHTML को अमान्य नहीं करता है (जब तक कि यह एक मान्यता प्राप्त टैग नहीं है)
— पॉल
0

कुंआ! आप वास्तव में कस्टम एचटीएमएल विशेषताओं का एक गुच्छा बना सकते हैं, जो वास्तव में आप चाहते हैं कि डेटा विशेषताओं को छिपाने के द्वारा।

जैसे। 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

यह स्पष्ट रूप से काम करता है, लेकिन यह आपके दस्तावेज़ को अमान्य कर देगा, आपके लिए कस्टम विशेषताओं या यहां तक ​​कि तत्वों के लिए JScript का उपयोग करने की कोई आवश्यकता नहीं है जब तक कि आपके पास नहीं है, आपको बस अपने नए तैयार किए गए (कस्टम) विशेषताओं का इलाज करने की आवश्यकता है उसी तरह जब आप अपना इलाज करते हैं "डेटा" विशेषता

याद रखें "अमान्य" का कोई मतलब नहीं है। दस्तावेज़ हर समय ठीक लोड होगा। और कुछ ब्राउज़र वास्तव में केवल DOCTYPE की उपस्थिति से आपके दस्तावेज़ को सत्यापित करेंगे ....., आपको वास्तव में पता है कि मेरा क्या मतलब है।

— Abdulbasit
स्रोत
-8

आप एक विशेषता के बजाय जावास्क्रिप्ट से इच्छित मान निकालने के लिए ऐसा कुछ कर सकते हैं:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
— मेढक
स्रोत
गुण एक कारण से मौजूद हैं; जैसे बातें करते हैं <input type="hidden" value="...">। हालाँकि, एक छिपे हुए क्षेत्र में आपके द्वारा डाले जा सकने वाले डेटा के विपरीत विभिन्न विशेषताओं में आपके द्वारा डाले गए डेटा के प्रकार के बीच का अंतर। मेटाडेटा का एक टुकड़ा बनाए रखने के लिए <span>(सभी चीजों का) छिपाना एक <a>अच्छा कदम नहीं है। यह आपकी साइट के लिए अजीब होगा और बहुत जेएस (सुंदर गिरावट, लोगों) पर निर्भर करेगा।
— जे एडवर्ड्स
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.