マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

javascript(jquery)

HTML5 【data-】 独自データ属性を使おう!

投稿日:2014年8月1日 更新日:

独自データ属性、カスタムデータ属性、data-role属性・・・
と色々な呼ばれ方をする、html5で追加されたオリジナルの属性をつくれる素敵な仕組み!

「href」はリンク先、「id」「class」は名前を付けられる、「src」はファイルの場所を指定する・・・
オリジナルで属性を作って一体なんのためになるの??

jQueryで値が取得できるのです。
JSであれこれする時に、$(this)の親要素に隣接する〇〇要素の子要素の~とか、display:none;で必要な値を隠したり、本来必要のない属性を使ってみたり・・・なんてことはありませんか?
それがたったひとつ?無限に作れる属性で解決できます。

記述はとっても簡単です。

<div id=”box” data-aa=”全角” data-bb=”#id” data-cc=”123″></div>

data-〇〇=”値”
このように〇〇の部分は自分で決めることができます。

その値は全角もOK!
→title属性をつけなくてもすみますね。

先頭に#や.をつけてもOK!
→クリックされたら$(this)の△△属性の値と#を結合して・・・なんてことが不要に!簡単に目的の要素のidやclassを指定ができ、記述がとても少なくすみますね。

もちろん数値もOKです!
→idやclassでは先頭に数字、もちろん数字だけなんてつけられないので、ぐっと幅が広がりますね。

jQueryでの値の取得は簡単です。

$(“#box”).attr(“data-aa”);

これで取得できる値は「全角」ですね。

とっても便利な独自データ属性。
あなたならどんな使い方をしますか?

-javascript(jquery)

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

【jQuery】 $(this)の親要素、子要素、隣接要素を指定する

jQueryでイベントが発生した要素を指定する$(this)。 jQueryを初めて使った頃は$(this)ってなんだ!? なんで普通に<li>なら$(“li”)じゃだめなの~!? なんて …

面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!

折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなどを 作成することができる「Chart.js」をご紹介致します。 今回は一番汎用性の高いと思われる折れ線グラフを作成してみたいと思います。 表示の瞬 …

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

レスポンシブにも対応!行ごとのブロック要素の高さを自動で合わせる方法。

ブロック要素の高さを揃えるJavaScriptはいくつかあります。 その中でも行ごとの高さを変えたい場合に便利な「fixHeight.js」をご紹介します。 「fixHeight.js」の設置方法 ま …

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

面白い動きや便利な機能をJSで実装! その2:いろんな種類のグラフを簡単に作成!

以前ご紹介しました面白い動きや便利な機能をJSで実装! その1:簡単にグラフを作成する方法!の応用編になります。 前回は折れ線グラフをご紹介致しましたが、今回は「棒グラフ」「レーダーチャート」「円グラ …

jQueryでタブを作ってみた

今回はjQueryでタブを作ってみました。 タブは皆さんご存知の通りよくあるタブです! Webサイトのページ内でコンテンツ要素が大量にある場合 そのまま表示させるとページが縦長になり ブラウザ上で縦ス …