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

admin管理员组

文章数量:1399997

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

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

• javascript
• jquery
• html

Share Follow edited May 23, 2017 at 12:00 CommunityBot 111 silver badge asked Mar 23, 2016 at 11:07 konrad_firmkonrad_firm 86722 gold badges1111 silver badges3030 bronze badges 4

• 1 data attributes (along with all attributes names in term of best practices) should be lower case, otherwise it interferes with the way jQuery stores them in it's cache. – Rory McCrossan Commented Mar 23, 2016 at 11:10
• OK, but why Chrome is doing this? – konrad_firm Commented Mar 23, 2016 at 11:15
• 2 @RoryMcCrossan if you're interested, it's not only problem with jquery, actually I'm breaking spec: w3/TR/html5/…*-attributes – konrad_firm Commented Mar 23, 2016 at 12:08
• 1 thanks, I knew jQuery didn't like mixed-case data attributes but didn't realise they were in the spec as being lower case. – Rory McCrossan Commented Mar 23, 2016 at 12:10

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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');

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');

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

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

本文标签： javascriptCamel case in HTML tag attributes and jquerydoesn39t workwhyStack Overflow