How to access a custom HTML attribute?

Question

<span id="roleDropName" class="dropdown_btn_val" dropopt="1">Thamaraiselvam</span>

this is my code i need to get dropopt using above id or class and i did following code it shows nothing to me

console.log(document.getElementById("roleDropName").dropopt);

Please use the search before you ask a new question: http://stackoverflow.com/search?q=%5Bjquery%5D+get+custom+attribute+value — Felix Kling, Mar 20 '15 at 08:12
@FelixKling: Why didn't you close this question as a duplicate? There are plenty that ask the exact same question. — Cerbrus, Mar 20 '15 at 08:15
@Cerbrus: I wasn't able to find a good (i.e. canonical) one... — Felix Kling, Mar 20 '15 at 08:16
Woot!, my google-fu is stronger than yours :P Fair enough, though :P — Cerbrus, Mar 20 '15 at 08:17

score 6 · Answer 1 · edited May 23 '17 at 11:52

None of the DOM elements has a property dropopt, so you get back the value undefined.

If you want to access custom attributes, you have to use getAttribute:

document.getElementById("roleDropName").getAttribute('dropopt');

However, custom attributes are better defined as data-* attributes. Then you can also use dataset in browsers that support it.

Related questions:

Norlihazmey Ghazali · Accepted Answer · 2015-03-20T08:13:40.747

2

Here is the jquery version. First you need to get the id name, and then you can use .attr() function which is to get the attribute value or even added the new one.

console.log($('#roleDropName').attr('dropopt'));

edited Mar 20 '15 at 08:13

answered Mar 20 '15 at 08:02

Norlihazmey Ghazali

9,000
1
23
40

OP removed the tag in the meantime btw. – Felix Kling Mar 20 '15 at 08:05
1

Apparently it wasn't the OP but an other editor. Added back the tag. – Felix Kling Mar 20 '15 at 08:11

How to access a custom HTML attribute?

2 Answers2