Dataset
data-* 属性は HTML 要素にカスタムデータを格納する標準的な方法です。JavaScript では element.dataset でアクセスします。
概要
data-* 属性は HTML 要素にカスタムデータを格納する標準的な方法です。JavaScript では element.dataset でアクセスします。
対応ブラウザ
デスクトップ
Chrome 7+
Edge 12+
Safari 5.1+
Firefox 6+
モバイル
Chrome Android 18+
Safari iOS 5+
Firefox Android 6+
基本構文
JAVASCRIPT
<div id="user" data-id="42" data-role="admin" data-full-name="山田太郎">
</div>
<script>
const el = document.getElementById('user');
console.log(el.dataset.id); // "42"
console.log(el.dataset.fullName); // "山田太郎"
</script>実務での使いどころ
-
Dataset の活用
data-* カスタムデータ属性。要素にカスタムデータを付与するための標準的な仕組み。
注意点
- 古いブラウザでは対応していない場合がある。
アクセシビリティ
- スクリーンリーダーでの読み上げを確認すること。