【jQuery】HTML5 から導入さらたカスタムデータ属性を使いこなす。

カスタムデータ属性 (独自データ属性)

HTMLの属性として記述する事ができそれをJavaScript(jQuery)で取得する事で様々な処理をする時の判定条件に使える便利な属性です。

記述方法

データ属性はどんなHTMLタグにも付ける事ができ複数設定する事もできます。

<div id="main" data-point="5" data-i="これは一番目です">
    おはようございます。 
</div>

上記のように「data-」より後ろを適当な単語にします。今回は「point」「i」の2つを指定しています。

データを取得(jQuery)

<script>
    let data = $('#main').data('i');
    console.log(data);//表示結果:これは一番目です
    
    let data2 = $('#main').data('point');
    console.log(data2)//表示結果:5
</script>

取得は「data-」より後ろの適当に付けた単語を明示する事で取得できます。

タイトルとURLをコピーしました