jsでは変数名をキャメルケースにしてて、どうせなら目につくとこ統一したいなーと思ったんです。
で、そういえばdata属性って最初からキャメルケースにしたらどうなるんやろー？って。
まあ結論からいうと、ダメですｗ
どうなるかというと
こういうHTMLを用意して
HTML
<div id="div1" data-hoge-fuga="OK">Data-Hyphenated</div> <div id="div2" data-hogeFuga="OK">dataCamelCased</div>
以下みたくjsで取得するとー。
JavaScript
var $d1 = $('#div1'), $d2 = $('#div2'); /** * $el.data() * */ // Hyphenated $d1.data('hoge-fuga'); // => OK $d1.data('hogeFuga'); // => OK $d1.data('hogefuga'); // => undefined // camelCased $d2.data('hoge-fuga'); // => undefined $d2.data('hogeFuga'); // => undefined $d2.data('hogefuga'); // => OK /** * $el.attr() * */ // Hyphenated $d1.attr('data-hoge-fuga'); // => OK $d1.attr('data-hogeFuga'); // => undefined $d1.attr('data-hogefuga'); // => undefined // camelCased $d2.attr('data-hoge-fuga'); // => undefined $d2.attr('data-hogeFuga'); // => OK $d2.attr('data-hogefuga'); // => OK /** * el.getAttribute() * */ // Hyphenated $d1[0].getAttribute('data-hogeFuga'); // => null $d1[0].getAttribute('data-hoge-fuga'); // => OK $d1[0].getAttribute('data-hogefuga'); // => null // camelCased $d2[0].getAttribute('data-hogeFuga'); // => OK $d2[0].getAttribute('data-hoge-fuga'); // => null $d2[0].getAttribute('data-hogefuga'); // => OK /** * el.dataset * */ // Hyphenated $d1[0].dataset['hoge-fuga']; // => undefined $d1[0].dataset['hogeFuga']; // => OK $d1[0].dataset['hogefuga']; // => undefined // camelCased $d2[0].dataset['hoge-fuga']; // => undefined $d2[0].dataset['hogeFuga']; // => undefined $d2[0].dataset['hogefuga']; // => OK
こうなった
data(dataset)としては
- ハイフンで定義すると、キャメルケースでアクセスできるようになる
- キャメルケースで定義すると、ローワーケースに直されてしまう
attrとしては
- 定義した通りでしかアクセスできない
- ただ、キャメルケースはローワーケースでもアクセスできるようになる <- mjk!
結論
大人しくハイフンでつないで書いて、ハイフンでつないで取得しましょうね。
参考：3 Semantics, structure, and APIs of HTML documents — HTML5