ホーム > ブログ > プログラミングTips > カスタムデータ属性を使う時はIEに気をつけろ

カスタムデータ属性を使う時はIEに気をつけろ

2015.11.25

おはです。銀ねこです。

毎日ネタに事欠きません。
最近、html5のカスタムデータ属性でスコーシだけハマったのでそれについてメモします。

カスタムデータ属性とは?

独自データ属性は、名前空間に属さない属性で、その名前は文字列 "data-" で始まり、ハイフンの後に少なくとも一文字が続きます。適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。
すべてのHTML要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

独自データ属性/html5.jpより

カスタムデータ属性を使えば、htmlのタグごとにオリジナルのデータを作ることができるわけです。データはdata-* = valueとなるのでオリジナルデータ名がcustomであれば以下をhtmlのタグ内に入れてやればいいわけです。

data-name = 'neko01'

カスタムデータの取得方法

attr()かdata()で取得可能です。

ただし、取得できる値が変わってくるので注意。

jQuery

attr('data-name')

  • HTMLのカスタムデータ属性(data-*)を読み書きする
  • 値は常に文字列として扱われる

data('name')

  • jQuery内のキャッシュのデータを読み書きする(ただし、取得時に該当キャッシュが無ければカスタムデータ属性を取得する)
  • 値には自動で型が設定される(文字列、数値、Bool値、オブジェクト、配列)



もちろん、JavaScriptでも取得できます。
取得できるデータは上記と一緒。

JavaScript

element.getAttribute('data-name')
element.setAttribute('data-name','value');

  • setAttribute()で新しいカスタムデータ属性を設定できます。

element.dataset.camelCase

  • データ名をキャメルケースに変換できます。
    例:data-user-name = '◯◯' > element.dataset.userName

 

jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件

データを削除するには…?

便利なカスタムデータですがdata()でjQuery内にキャッシュが残ります。
なのでデータを削除する時はjQuery内のキャッシュに保存されたデータとhtml側両方削除する必要があるそう。

  • removeAttr()…でhtml側を削除
  • removeData()…jQuery内のキャッシュを削除

JavaScriptでカスタムデータ属性にアクセスする2つの方法とその違い

JavaScript「element.dataset.データ名」だとIE9では動きませんでした。。。ちーん。

ちなみに私がはまったのはここ。
jQueryで取得すればよかったのになぜかJavaScriptで取得したのでIE9では動かないというバグにハマりました。

jQueryだと問題なく動きます。

この記事のタグ