tusbasaのブログ

業務や勉強中に調べたことを自分用にメモするブログ

【JQuery】data属性

data属性とは独自に設定できる属性。 data-ではじまる。 data属性に任意の値を持たせることで様々な処理がしやすくなる。

<p data-name="hoge">name1</p>

data属性の値の取得 引数を指定しないと全てのdata属性の値を取得する。

<p data-name="hoge" data-age="20">name1</p>
var a = $("p").data();
console.log(a);
{ name: "hoge", age: 20 }

var a = $("p").data(name);
console.log(a);
"hoge"

data属性の値の設定 dataメソッドの第一引数にdata-以降に続く属性名を第二引数にdata属性の値を設定する。

<p>name1</p>
$("p").data("name","hoge")
//以下のようにdata属性を設定できる
//<p data-name="hoge">name1</p>

data属性の値の変更も設定と同じようにできる。


var a = $("p").data(name);
console.log(a);
"hoge"

参考 https://www.sejuku.net/blog/38263