custom attribute works only with element.getAttribute("attribute") but not "element.attribute"

Question

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?

It's a littlebit jQuery-specific, but see the duplicate of .prop() vs .attr(). If you want a only-plain-js explanation, see javascript.info/tutorial/attributes-and-custom-properties — Bergi
– Bergi, Commented Feb 21, 2013 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="xyz.jpg"></button>: button.src will be undefined. — Sebastian Simon
– Sebastian Simon, Commented Jul 31, 2018 at 16:10

the system · Accepted Answer · 2013-02-21 19:54:08Z

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

answered Feb 21, 2013 at 19:54

the system

9,35642 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Bergi Over a year ago

element.data? Are you sure you didn't mean dataset?

the system Over a year ago

@Bergi: Thanks, that's what I meant. Fixed.

Collectives™ on Stack Overflow

custom attribute works only with element.getAttribute("attribute") but not "element.attribute"

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related