本記事では、jQueryでdata属性の取得・追加・変更する方法について解説しています。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
data属性の操作
HTMLに独自に付けられるdata属性を取得・追加・変更するには、dataメソッドまたはattrメソッドを使用します。
data属性の取得
data属性をdataメソッドで取得する方法は以下のとおりです。
$("対象要素").data();
$("対象要素").data("データ属性名");dataメソッドを使用してdata属性を取得する場合、引数に何も指定しないまたは引数に取得したいデータ属性名を指定します。
引数に何も指定しない場合、取得したデータはオブジェクト形式で返されます。また、対象要素に複数のデータ属性が付与されている場合、全てのデータ属性を取得することが出来ます。引数に取得したいデータ属性名を指定した場合、オブジェクト形式ではなく文字列として返されます。
data属性をattrメソッドで取得する方法は以下のとおりです。
$("対象要素").attr("data-データ属性名");attrメソッドを使用してdata属性を取得する場合、data-データ属性名と全て記述する必要があります。dataメソッドのようにdata-を省略することは出来ません。
data属性を取得するサンプルコードと実行結果は以下のとおりです。
<p id="el" data-name="apple">りんご</p>const data1 = $("#el").data();
console.log(data1); // -> { "name": "apple" }
const data2 = $("#el").data("name");
console.log(data2); // -> "apple"
const data3 = $("#el").attr("data-name");
console.log(data3); // -> "apple"data属性の追加&変更
data属性の追加と変更する方法は全く同じです。
data属性をdataメソッドで追加・変更する方法は以下のとおりです。
$("対象要素").data("プロパティ名", "値");dataメソッドを使用してdata属性を追加・変更する場合、第一引数にプロパティ名を指定し第二引数に値を設定します。
data属性をattrメソッドで追加・変更する方法は以下のとおりです。
$("対象要素").attr("プロパティ名", "値");attrメソッドを使用してdata属性を追加・変更する場合、dataメソッドと同様に第一引数にプロパティ名を指定し第二引数に値を設定します。また、第一引数のプロパティは取得時と同様にdata-は省略することが出来ません。
data属性を追加・変更するサンプルコードと実行結果は以下のとおりです。
<p id="el" data-name="apple">りんご</p>$("#el").data("color","blue");
console.log($("#el").data("color")); // -> "blue"
$("#el").data("color","red");
console.log($("#el").data("color")); // -> "red"
$("#el").attr("data-price", "200");
console.log($("#el").attr("data-price")); // -> "200"
$("#el").attr("data-price", "300");
console.log($("#el").attr("data-price")); // -> "300"
