Does jQuery internally convert HTML5 data attribute keys to lowercase?

Question

I am trying to conform my JavaScript coding style to my Zend coding style as much as possible, which is using camelCase. So, in my HTML5 data attributes, I am naming them as in this example:

<button class="action" data-actionClass="user" data-actionMethod="delete" data-actionRequest="/user/delete/user-id/1" data-actionComplete="{reload:users}">Delete User #1</button>
<div id="users" data-reloadRequest="/user/index"> ... </div>

Pretty unobtrusive way to harness Jquery for actions, but when I call $('.action').data(), the attribute names are converted to lowercase.

Any workarounds for this?

I never though JavaScript variables should have dashes in them, and I can't understand why jQuery is internally doing this for me? Or maybe it is HTML5?

Answer 1

If you use

data-action-method="delete"

then you can access the attribute with

$('.action').data('actionMethod')

This is part of the HTML5 DOM API:

The custom data attributes is transformed to a key for the DOMStringMap entry with the following rules:

• any dash (U+002D) is removed;
• any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.

Answer 2

First off, see this part of the source code of JQuery, it assumes you have lower case attributes.

Secondly, by convention, all HTML5 attributes should be lowercase, see: http://www.htmlbasictutor.ca/html-tag-attributes.htm

Finally, be warned you may encounter futher problems if you insist on using upper cases, see Django: Unable to add UPPERCASE attribute name in HTML input element