🧊

HTML5のdata属性をキャメルケースで定義するとどうなるか

jsでは変数名をキャメルケースにしてて、どうせなら目につくとこ統一したいなーと思ったんです。
で、そういえばdata属性って最初からキャメルケースにしたらどうなるんやろー?って。


まあ結論からいうと、ダメですw

どうなるかというと

こういう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