HTML要素にデータ属性を設定する方法


233

属性を持つdivがありますdata-myval = "10"。その値を更新したい。使ったら変わらないのdiv.data('myval',20)?使用する必要があるdiv.attr('data-myval','20')だけですか?

HTML5とjQueryの間で混乱していますか?お知らせ下さい。ありがとう!

編集:に更新されましdiv.data('myval')=20div.data('myval',20)が、HTMLは更新されていません。


1
何が入ってるのdiv?jQueryオブジェクトまたは要素?
ブラッド

2
div.data('myval')=20構文が間違っているという理由だけで値を格納することはできません-正しい構文の回答を参照してください。ただし.data()、実際には要素の属性は更新されません。データは別の場所に保存されます。
nnnnnn

gQueryを回避する意味がある場合は、これを使用してください-> div.dataset.myval = '20';
HarijsKrūtainis

回答:


448

HTML

<div id="mydiv" data-myval="10"></div>

JS

var a = $('#mydiv').data('myval'); //getter

$('#mydiv').data('myval',20); //setter

デモ

参照

参照から:

jQuery自体はこの.data()メソッドを使用して、「イベント」および「ハンドル」という名前で情報を保存します。また、アンダースコア(「_」)で始まるすべてのデータ名を内部使用のために予約します。

jQuery はHTML data()data属性を変更しないことに注意してください。

したがって、dataHTML の属性を変更する必要がある場合は、.attr()代わりに使用する必要があります。

HTML

<div id="outer">
    <div id="mydiv" data-myval="10"></div>
</div>

JS:

alert($('#outer').html());   // alerts <div id="mydiv" data-myval="10"> </div>
var a = $('#mydiv').data('myval'); //getter
$('#mydiv').attr("data-myval","20"); //setter
alert($('#outer').html());   //alerts <div id="mydiv" data-myval="20"> </div>

このデモを見る


私はあなたが必要なものを一貫知らないが、私は使用することをお勧めしますdata()getし、setHTML-5データ属性。
Jashwant

7
@Jashwantは、代わりに便利な編集かもしれません。CSSルールをのように考えると、[data-myval="10"]{ color: red; }データ属性の値に従ってタグのスタイルが設定されます。
TechNyquist 2017年

4
.dataは機能しません。.attrは機能します。答えを編集して明確にすることができるかもしれません。最初の問題が解決策であるように見えますが、少しだけ公開されているかもしれません。私はよりよく説明する方法がわからない、これが私が投稿を編集しない理由です。
ガウチョ

@ガウチョ、それは今より良いですか?
Jashwant

1
@Gaucho .dataは、新しいjQuery> = 1.4.3を使用する場合にのみ機能します。古いバージョンでは.attrが機能します。
Ilias 2018年

41

次のattrものも使用できます。

HTML

<div id="mydiv" data-myval="JohnCena"></div>

脚本

 $('#mydiv').attr('data-myval', 'Undertaker'); // sets 
 $('#mydiv').attr('data-myval'); // gets

または

$('#mydiv').data('myval'); // gets value
$('#mydiv').data('myval','John Cena'); // sets value

6
私にとっては、.attrのみを使用しました。それは可能ですか?
ザリウェヤ2017

うまくいったことを嬉しく思います。.data()呼び出しは特別です-HTML5データ属性を取得するだけでなく、属性の評価/解析も試みます。したがって、data-myval = '{"hello": "world"}'のような属性を使用すると、.data()を介して取得するとObjectが返され、.attr()を介して取得すると文字列が返されます。
Baqer Naqvi 2017

32

javascriptで.data()html5 data-属性を変更しても、jQuery は更新されないことに注意してください。

jQuery .data()を使用data-してHTML要素に属性を設定する場合は、jQuery を使用して属性.data()を読み取ることをお勧めします。そうしないと、属性を動的に更新した場合に不整合が生じる可能性があります。例えば、参照setAttribute()dataset()attr()以下。値を変更し、ボタンを数回押して、コンソールを表示します。


29

バニラJavascriptソリューション

HTML

<div id="mydiv" data-myval="10"></div>

JavaScript:

  • DOMのgetAttribute()プロパティを使用する

     var brand = mydiv.getAttribute("data-myval")//returns "10"
     mydiv.setAttribute("data-myval", "20")      //changes "data-myval" to "20"
     mydiv.removeAttribute("data-myval")         //removes "data-myval" attribute entirely
  • JavaScriptのdatasetプロパティを使用する

    var myval = mydiv.dataset.myval     //returns "10"
    mydiv.dataset.myval = '20'          //changes "data-myval" to "20"
    mydiv.dataset.myval = null          //removes "data-myval" attribute

8

jQueryを使用している場合は、次を使用します.data()

div.data('myval', 20);

を使用して任意のデータを保存でき.data()ますが、を使用する場合は文字列のみに制限されます.attr()


14
この.data()メソッドは属性を更新しないことに注意してください。つまり、メソッドが格納するデータは、属性から値を取得できても、最終的に属性になりません(そのため、非文字列値を格納できます)。OPは属性を設定する必要がないのではないかと思いますが、それでも問題はありません。data- data-
nnnnnn

1
私はそれが問題になるとは思いません(あなたが言ったこと以外に、または.attr()属性を取得するために使用する他のコードがある場合)。OPが属性の更新について明示的に(おそらく誤って)尋ねた場合は、指摘する価値があると思いました。
nnnnnn

1
@ブレンダーこれは本当に私の質問に答えません。HTMLを更新したいのですが、同時に、element.data( 'myval')を使用してHTMLも取得します。
Pulkit Mittal、2012

1
ドキュメントの読み込み時に生成される要素にはデータ属性としての要素があり、新しい動的要素にもそれを適用したいので、これを行う必要があります。特に必要はないかもしれませんが、一貫性を保ちたいと思っています。
Pulkit Mittal、2012

1
@PulkitMittal- .attr()「html」を実際に更新していなくても、DOMを更新していることに注意してください。ブラウザに「html」を提供するように要求すると(.html()DOMまたはDOMを問わずelement.innerHTML)、ブラウザはその時点のDOMの状態に基づいて効果的に再生成します。ちょっと。
nnnnnn

3

[jQuery] .data()対.attr()対.extend()

jQueryメソッド .data()は、正しい場合は、メソッドを使用してjQueryによって管理される内部オブジェクトを更新します。

data-attributesスプレッドを更新するには、次を使用します-

$('body').attr({ 'data-test': 'text' });

- さもないと、 $('body').attr('data-test', 'text');なく動作します。

あなたがこれを達成することができる別の方法は使用しています-

$.extend( $('body')[0].dataset, { datum: true } );

-これは、属性の変更を追加HTMLElement.prototype.datasetはなくHTMLElement.prototype.attributes、に制限します。


2

data-属性を設定する別の方法は、datasetプロパティを使用することです。

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>

const el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

// set the data attribute
el.dataset.dateOfBirth = '1960-10-03'; 
// Result: el.dataset.dateOfBirth === 1960-10-03

delete el.dataset.dateOfBirth;
// Result: el.dataset.dateOfBirth === undefined

// 'someDataAttr' in el.dataset === false
el.dataset.someDataAttr = 'mydata';
// Result: 'someDataAttr' in el.dataset === true

0

jQueryとDOMの同期を維持するには、簡単なオプションを使用できます

$('#mydiv').data('myval',20).attr('data-myval',20);        
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.