【Amazon】人気の商品が日替わりで登場!
毎日お得なタイムセール!商品をみる

jQueryでdata属性の取得・追加・変更する方法

本記事では、jQueryでdata属性の取得・追加・変更する方法について解説しています。

JavaScriptの学習におすすめ書籍
1冊ですべて身につくJavaScript入門講座
総合評価
( 5 )
メリット
  • 誰でも分かるように嚙み砕いて説明してくれる
  • アニメーションの知識が深く学べる
  • 1つのWebサイトを作りながら学べる
楽天ブックス
¥2,794 (2024/05/19 02:42時点 | 楽天市場調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
先輩くん

Amazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ!

後輩ちゃん

初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね!

全プログラマー必見!
変数名/関数名にもう悩まない!
リーダブルコード
総合評価
( 5 )
メリット
  • 美しいコードが書けるが自然と書けるようになる
  • 他の開発者が理解しやすいコードになる
著:Dustin Boswell, 著:Trevor Foucher, 解説:須藤 功平, 翻訳:角 征典
¥2,640 (2023/07/23 02:48時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場で探す
\ポイント5%還元!/
Yahoo!ショッピングで探す
目次

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"

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村 FC2 Blog Ranking

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次