How to preserve the case of a data attribute?

Question

The html object:

 <div data-myAttribute="test"></div>

The code:

 var $o = $("div");

 $.each($o.data(),function(k,v){
    console.log(k); 
    //writes 'myattribute' instead of 'myAttribute'
 });

How do I preserve the case of the attribute?

Three

You should use data-my-attribute to get .data('myAttribute') – Caesalpiniaceous

have a look here – Paedo

@A.Wolff Thank you, that seemed to help me. Despite the fact it can't be used according to the answers. – Three

@ControlFreak data-my-attribute is perfectly valid attribute name regarding spec: For each name on the list, for each U+002D HYPHEN-MINUS character (-) in the name that is followed by a character in the range U+0061 to U+007A (U+0061 LATIN SMALL LETTER A to U+007A LATIN SMALL LETTER Z), remove the U+002D HYPHEN-MINUS character (-) and replace the character that followed it by the same character converted to ASCII uppercase. – Caesalpiniaceous

@A.Wolff I'd put your comments as an answer, since it answers the intent of the OP (and also matches what I wanted) – Goulden

Answer 1

If your goal is to target myAttribute as key of dataset property, you should use data-my-attribute:

<div data-my-attribute="test"></div>

See following link regarding camelCased rule: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement.dataset

PS: as Izkata commented it:

For reference for others, jquery also does conversion such that $div.data('my-attribute') returns the same thing as $div.data('myAttribute'). The vanilla javascript dataset property does not do this.

Caesalpiniaceous

I chose your answer because it was useful and did what I needed done. Thanks. – Three

For reference for others, jquery also does conversion such that $div.data('my-attribute') returns the same thing as $div.data('myAttribute'). The vanilla javascript dataset property does not do this. – Volute

Answer 2

Valid HTML data attributes can't contain uppercase characters anyway:

From the W3:

A custom data attribute is an attribute in no namespace whose name starts with the string "data-", has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

Eventually

Answer 3

You can't. Attribute names are always lowercase in HTML5.

Matsuyama

Answer 4

As an addendum to @A. Wolff's answer, you can apply a -- to the data attribute name if you want leading capitals.

<div data--my-attribute="test"></div>

Will result in a data key of MyAttribute

Loveliesbleeding