Camel case in HTML tag attributes and jquery - doesn't work, why?

Question

Yes, there are similar questions, but they are about jquery adding lowercase attributes like here: Does the attr() in jQuery force lowercase?

But I have a different situation. Here is my HTML5 piece of code:

<tr class='projectRow' data-projectId='34'>

Notice that this is camelCase. And now this code does not work:

//"this" points to a child element
$id = $(this).closest('.projectRow').data('projectId');//undefined

But if I make it lowercase:

$(this).closest('.projectRow').data('projectid');

It works.

When I look at the source code, it's clearly "projectId" (camelCase), but when in chrome -> dev tools -> elements then it's "projectid" (lowercase) o_O

No wonder jquery can't get this value, but why is Chrome doing this? I did something similar hundreds of times before, although was using a - like in "project-id" and now after so many years of making web applications I discover something like this o_O

Answer 1

EDIT

The HTML spec states attribute names are case-insensitive, meaning writing them all as uppercase is as good as writing them all in lowercase or in camelCase:

Attribute names for HTML elements may be written with any mix of lowercase and uppercase letters that are a case-insensitive match for the names of the attributes given in the HTML elements section of this document; that is, attribute names are case-insensitive.

EDIT #2

Another part of the spec states it more explicitly:

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

Original Answer

jQuery specifies that if you want to access attributes via camelCase, then hyphenate them such that:

data-project-id="1" is accessed via $(element).data('projectId');

Answer 2

Instead of using ".data()" you could just use ".attr()" to access the value of the attribute, then you could reference it by the name you've given it; like the following:

$(element).attr('data-projectId');

Answer 3

If you're ok with ordinary Javascript and use HTML5 this should work:

element.getAttributeNS(null, 'data-projectId')