Native JS for Reading HTML5 Custom Data Attributes

Question

I have learned that HTML5 includes a means to set custom attributes on elements using the data- prefix. However I'm a bit scewered in terms of how to read the properties during a javascript code block. I guess it is my interpretation of how the DOMStringMap is working thats off.

Could someone simplify how to read the properties of the following sample html.

<span data-complex-key="howtoRead" data-id="anId">inner</span>

Trying following doesnt really work as expected

spanEl.dataset['id']                    // straight-forward and result is anId
spanEl.dataset['complex-key']           // undefined
spanEl.dataset['complex']['key']        // throws 'cannot read property of undefined'
spanEl.getAttribute('complex-key')      // there's a null however,
spanEl.getAttribute('data-complex-key') // this variant seems to work

Another thing that makes me wonder is, the CSS selectors seems to follow the excact same pattern as to which is i written in the DOM, so why is this not the case with reading from javascript.

For instance, this would match

 span[data-complex-key="howtoRead"] { color:green }

Appreciate the help, still getting more and more intreaged with the HTML5 Canvas, Video and local Data Storage :)

You shouldn't use dashes in the attribute keys BTW, better opt for camelCased complexKey here. — m90
– m90, Commented Sep 26, 2012 at 16:48

Pierre Spring · Accepted Answer · 2018-07-18 08:58:34Z

11

In vanilla-JS, assuming spanEl is a reference to the DOM node

spanEl.dataset.complexKey

will work using the camelCase notation (see http://jsbin.com/oduguw/3/edit) when your data attribute contains hypens (-) and also

spanEl.getAttribute('data-complex-key')

will work fine as you already noticed. As a side note, in jQuery you can access to that data attribute with

$(spanEl).data("complex-key")

edited Jul 18, 2018 at 8:58

Pierre Spring

10.7k13 gold badges52 silver badges44 bronze badges

answered Sep 26, 2012 at 16:35

Fabrizio Calderan

124k26 gold badges171 silver badges183 bronze badges

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

1 Comment

Phrogz Over a year ago

Note that in JavaScript dataset['foo'] is the same as dataset.foo, as long as foo is a valid identifier.

Shmiddty · Accepted Answer · 2012-09-26 16:50:15Z

2

In Chrome, it seems to map the data keys in a not-so-straightforward way:

console.log(spanEl.dataset);
//shows:
//DOMStringMap
//  complexKey: "howtoRead"
//  id: "anId"

It converts "complex-key" to "complexKey".

While not being completely straightforward, this behavior is defined in the HTML5 spec here:

http://dev.w3.org/html5/spec//global-attributes.html#dom-dataset

answered Sep 26, 2012 at 16:50

Shmiddty

13.9k1 gold badge38 silver badges52 bronze badges

Comments

Wolfgang Stengel · Accepted Answer · 2012-09-26 16:50:31Z

1

Your first and last method are correct while not using any libraries. However a key with a minus sign is converted to Camel Case, so complex-key becomes complexKey:

spanEl.dataset['id']
spanEl.dataset['complexKey']
spanEl.getAttribute('data-complex-key')

However, only the last one works in IE up to 9. (I don't know about 10.) The data attributes are nothing else than normal attributes having a naming convention in this case.

answered Sep 26, 2012 at 16:50

Wolfgang Stengel

2,8561 gold badge19 silver badges22 bronze badges

Comments

Sushanth -- · Accepted Answer · 2012-09-26 16:50:21Z

0

 spanEl.dataSet["complexKey"]

//Using jQuery you can try this

 $('span').data('complex-key')  // Will give you **howtoRead**

    $('span').data('id')  // Will give you **anId**

edited Sep 26, 2012 at 16:50

answered Sep 26, 2012 at 16:36

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

Collectives™ on Stack Overflow

Native JS for Reading HTML5 Custom Data Attributes

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related