Help us understand the problem. What is going on with this article?

htmlタグに独自の属性をマークアップする

More than 5 years have passed since last update.

data属性は「data-」以降に文字列を指定することで設定できる。たとえば「data-hoge」に「fuga」という値を設定する場合はマークアップは次のようになる。

基本的な使い方

<div data-hoge="fuga">テスト</div>

jQueryでこの「fuga」という値を取り出すには、dataメソッドの引数に「data-」以降に設定した文字列を指定する。

$('div').data('hoge');

複数のdata属性を設定

data属性は同じタグに複数設定することもできる。

<div data-hoge="fuga" data-yasai="にんじん" data-number="1">太郎</div>
$('div').data('hoge');
$('div').data('yasai');
$('div').data('number');

一つのdata属性に複数の値を設定

オブジェクトを入れれば一つのdata属性に複数の値を設定できる。

<div data-hoge='{"yasai":"にんじん", "number":"1"}'>太郎</div>

jQueryではdata属性の後にオブジェクト名を指定する。

$('div').data('hoge').yasai; //にんじん
$('div').data('role').number; //1

jQueryでdata属性を設定する

逆にjQueryからdata属性を設定する場合は普通に「attr」メソッドを使用する。

<div>ほげほげ</div>
$('div').attr({ 
    'data-hoge': 'fuga',
    'data-option': '{"yasai":"にんじん", "number":"1"}'
});
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした