9

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?

Isti115
  • 2,418
  • 3
  • 29
  • 35
  • It's a littlebit jQuery-specific, but see the duplicate of [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr). If you want a only-plain-js explanation, see http://javascript.info/tutorial/attributes-and-custom-properties – Bergi Feb 21 '13 at 19:53
  • This also applies to existing attributes added to elements whose `prototype` doesn’t provide a property mapping to the attribute, e.g. ``: `button.src` will be `undefined`. – Sebastian Simon Jul 31 '18 at 16:10

1 Answers1

19

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().

the system
  • 9,244
  • 40
  • 46