javascript - Case sensitive in data attribute

Question

Well it must be late and my brain got numb. How come jQuery doesn't recognize case sensitive in data attribute? I faced this annoying problem:

HTML:

<a data-showId="12345">Test 1</a>

Javascript:

console.log($('a').data('showId'));
console.log($('a').data('showid'));

The first line is undefined and second returned 12345 correctly. I thought it supposed to returned correctly in first line and undefined in second. So does it mean all data- attr must be lowercase?

Check it out here http://jsfiddle.net/qhoc/7dExt/1/

Answer 1

I think it has to do with the fact that data-* explicitly prevents the data key from having capital A to Z letters.

• the name must not start with xml, whatever case is used for these letters;
• the name must not contain any semicolon (U+003A);
• the name must not contain capital A to Z letters.

In the data-* naming scheme, a data attribute like data-show-id will be accessible in javascript using the key showId, because of this limitation the use of capital letters seems to be restricted in the key.

Also read:

All attributes on HTML elements in HTML documents get ASCII-lowercased automatically, so the restriction on ASCII uppercase letters doesn't affect such documents