独自データ属性、カスタムデータ属性、data-role属性・・・
と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み！
「href」はリンク先、「id」「class」は名前を付けられる、「src」はファイルの場所を指定する・・・
オリジナルで属性を作って一体なんのためになるの？？
jQueryで値が取得できるのです。
JSであれこれする時に、$(this)の親要素に隣接する〇〇要素の子要素の～とか、display:none;で必要な値を隠したり、本来必要のない属性を使ってみたり・・・なんてことはありませんか？
それがたったひとつ？無限に作れる属性で解決できます。
記述はとっても簡単です。
data-〇〇=”値”
このように〇〇の部分は自分で決めることができます。
その値は全角もOK！
→title属性をつけなくてもすみますね。
先頭に#や.をつけてもOK！
→クリックされたら$(this)の△△属性の値と#を結合して・・・なんてことが不要に！簡単に目的の要素のidやclassを指定ができ、記述がとても少なくすみますね。
もちろん数値もOKです！
→idやclassでは先頭に数字、もちろん数字だけなんてつけられないので、ぐっと幅が広がりますね。
jQueryでの値の取得は簡単です。
これで取得できる値は「全角」ですね。
とっても便利な独自データ属性。
あなたならどんな使い方をしますか？
弊社では社内制作にこだわるHTML構築技術から、WEBサイトの正確なコーディングをご提案します。
様々な目的に応じたプランを用意しておりますので、ご興味のある方はご覧ください。
WEBサイト制作実績3,000サイト以上！
新規作成からリニューアルまで、
多様なご要望にお応えした弊社制作事例から検討したい方はこちら
