【HTML 】カスタムデータ属性

  • このエントリーをはてなブックマークに追加

カスタムデータ属性( data-* )はhtmlのタグに付けるオリジナルの属性です。
データ属性は、似たような要素(id属性やclass属性では区別できない要素)も区別することができ、JavaScriptでdata属性の取得・設定・変更ができるため、非常に便利です。理解を深めるために、JavaScript・css・data属性を利用しながらサンプルコードを作成していきます。

部署IDのカスタムデータ属性を利用し、部署選択ボタンで該当社員行の背景色を動的に変える
  1. data属性とは
  2. data属性の取得・設定・変更(JavaScript、jQueryを使用)
  3. data属性にスタイルを適用させる(Css)

※ボタンやテーブルのデザインは、bootstrapを利用しています。

 1. data属性とは

カスタムデータ属性とは、data-○○○(○○○は大文字以外)の指定方法を守れば自由に作成できるオリジナル属性のことです。1つのhtmlタグ内に複数のdata属性を指定することも可能です。

 2. data属性の取得・設定・変更(JavaScript)

JavaScriptを利用して、data属性の取得・設定・変更をすることができます。
data属性にアクセスするには、jQueryのattr()を使用します。data()でアクセスできると書いてあるサイトもありますが、実際に使用した際、思っていたデータが取得・設定できなかったため、attr()を使用することをおすすめします。

data属性の設定方法

jQueryのattr(“data-○○○”)でdata属性が取得できます。

作成したオリジナル属性の社員Idの属性、部署Idの属性の取得ができます。

data属性の設定方法

jQueryのattr(“data-○○○”, 設定したい値)でdata属性を設定できます。課のId属性を追加するためdata-sectionidを追加します。

設定後のHtmlは下記になります。data-sectionidが追加されていることが確認できます。

data属性の変更方法

jQueryのattr(“data-○○○”, 変更したい値)で既に指定してあるdata属性を変更できます。社員Id=2、部署Id=200に変更します。

Htmlでdata属性が変更されたことを確認できます。

 3. data属性にスタイルを適用させる(Css)

独自のデータ属性にCssでスタイルを効かせることができます。JavaScriptでdata属性を取得・設定・変更し、Cssで適用させたいスタイルをあらかじめ設定しておけば、UIを動的に変えることができます。

例えば、下記のように社員一覧が表示されている画面があるとします。

部署名が「営業部」の社員の行のみ背景色を変えたい場合、下記のコードのように部署Idのdata属性を活用すると、簡単に背景色を変えることができます。

Cssでdata-departmentid=”3″(営業部)のtrにスタイルを適用させます。

営業部の社員のみ、背景色のスタイルが適用されたことが確認できます。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*