कस्टम विशेषता element.getAttribute ("विशेषता"), लेकिन नहीं "element.attribute"

Question

साथ ही काम करता है मैं तो बस, देखा है कि अगर मैं किसी HTML तत्व पर एक कस्टम विशेषता, उदाहरण के लिए दे:

<input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" /> 

तो मैं इसे इस तरह से प्राप्त कर सकते हैं:

document.getElementById("my_button").getAttribute("custom_attr"); 

और यह "custom_attr_text" वापस आ जाएगी, लेकिन मैं ऐसा करता है, तो

document.getElementById("my_button").custom_attr; 

तो यह undefined देता है!

मैंने यह भी देखा कि अंतर्निर्मित विशेषता के साथ (उदाहरण के लिए value या id) उपर्युक्त दोनों काम ठीक है! क्या कोई यह बता सकता है कि यह क्यों हो रहा है?

Answer 1

केवल कुछ मानक विशेषताओं को गुणों के लिए सीधे मैप किया जाता है। यह गैर मानक (कस्टम) विशेषताओं के लिए परिभाषित व्यवहार नहीं है।

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

<input ... data-custom_attr="custom_attr_text" ... /> 

तब वे एचटीएमएल 5 में उपलब्ध हो अनुरूप ब्राउज़र के रूप में:

element.dataset.custom_attr 

लेकिन लिगेसी ब्राउज़र में, आप अभी भी .getAttribute() का उपयोग करना होगा।