Posts Tagged ‘js’

結局IEでデータ属性(data-*)は使えるのかテスト

日曜日, 12月 16th, 2012

こんなのに対して

<div id="dataset" data-scalar-test="100" data-object-test='{"key": "value"}'>

それぞれ通常のDOMアクセスとjQuery経由でのアクセスをテスト。

環境

  • jQuery 1.7.2
  • IE6〜8 on WindowsXP & Chrome & Firefox

結果

こんな感じで



var scalar, obj;
var e;

scalar = $('#dataset').data('scalarTest');
obj = $('#dataset').data('objectTest');

alert(scalar);
alert(obj.key);

e = document.getElementById('dataset');
alert(e.getAttribute('data-scalar-test'));
alert(e.getAttribute('data-object-test'));

alert(e.dataset);
alert(e.dataset.scalarTest);
alert(e.dataset.objectTest);

 

みたいなコードを実行。

結果としてIE6〜8で


alert(e.dataset.scalarTest);
alert(e.dataset.objectTest);

のような書き方がNGだった以外は全てOK。
そもそもIEではe.datasetがundefinedになる。

jQuery経由でアクセスする限りIE〜でもdata-*属性は使えそう。

IE9については環境がないので機会があれば試したい。