custom attribute works only with element.getAttribute("attribute") but not "element.attribute"
custom-attribute, getattribute, javascript
Solution
Only certain standard attributes are directly mapped to properties. This is not the defined behavior for non-standard (custom) attributes.
The forward compatible way of using custom attributes is to prefix them with `data-`.
<input ... data-custom_attr="custom_attr_text" ... />
Then they become available in HTML5 compliant browsers as:
element.dataset.custom_attr
But in legacy browsers, you'll still need to use `.getAttribute()`.
Problem
I have just noticed, that if I give a custom attribute to an html element, for example: ``` <input type="button" id="my_button" custom_attr="custom_attr_text" value="value_text" /> ``` then i can retrieve it like this: ``` document.getElementById("my_button").getAttribute("custom_attr"); ``` and it will return `"custom_attr_text"`, but if I do ``` document.getElementById("my_button").custom_attr; ``` then it returns `undefined`! I also noticed that with a built in attribute (for example `value` or `id`) both of the above works fine! Could somebody please explain why is this happening?