2014.02.16jQueryでdata-*属性を扱う際にjQuery.data()メソッドもしくはjQuery.attr()メソッドを使うことになるでしょうが、jQueryで扱えるdata-*属性のオブジェクトは前提としてキャッシュ仕様であることを理解しておかないと嵌ることが多々あります。data-date-of-birth=&quot;2000-10-01&quot;&gt;Jack&lt;/div&gt;これらのdata-*属性を取得したい場合、jQueryであれば次のように記述します。"2000-10-01"jQuery.data()はjQuery1.4.3から追加された機能ですが、上のdateOfBirthのようにキャメルケースでアクセスする場合は、jQuery1.6より対応しています。&gt;Tom&lt;/div&gt;先ほどの取得と違いデータを設定する場合、jQueryであれば次のように記述します。//data()の場合jQuery(&quot;#user2&quot;).data(&quot;id&quot;,&quot;2&quot;);jQuery(&quot;#user2&quot;).data(&quot;user&quot;,&quot;Tom&quot;);jQuery(&quot;#user2&quot;).data(&quot;date-of-birth&quot;,&quot;2001-01-01&quot;);jQuery(&quot;#user2&quot;).data(&quot;dateOfBirth&quot;,&quot;2001-01-01&quot;);//attr()の場合jQuery(&quot;#user2&quot;).attr(&quot;data-id&quot;,&quot;2&quot;);jQuery(&quot;#user2&quot;).attr(&quot;data-user&quot;,&quot;Tom&quot;);jQuery(&quot;#user2&quot;).attr(&quot;data-date-of-birth&quot;,&quot;2001-01-01&quot;);これの実行後は、このHTMLは次のようにちゃんとデータが設定されることになります。data-date-of-birth=&quot;2001-01-01&quot;&gt;Tom&lt;/div&gt;再設定のときにキャッシュ仕様による問題が起こるすでに次のようにデータが設定されているとしましょう。data-date-of-birth=&quot;2000-10-01&quot;&gt;Jack&lt;/div&gt;このJackのデータをjQuery.data()メソッドもしくはjQuery.attr()メソッドを使って再設定する場合に、たとえば、誕生日を"1999-10-01"に書き換えたいとします。次のように記述することになるでしょう。//data()の場合jQuery(&quot;#user1&quot;).data(&quot;date-of-birth&quot;,&quot;1999-10-01&quot;);jQuery(&quot;#user1&quot;).data(&quot;dateOfBirth&quot;,&quot;1999-10-01&quot;);//attr()の場合jQuery(&quot;#user1&quot;).attr(&quot;data-date-of-birth&quot;,&quot;1999-10-01&quot;);これで書き換えできたのですが、実はjQueryで扱うjQuery.attr()メソッドではjQueryオブジェクト上は書き換えできていません。再度、取得しても、取得できる結果は書き換え前のデータが返ってくるだけです。"2000-10-01"本来はすべての結果で書き換えた"1999-10-01"の誕生日のデータが返ってきて欲しいわけですが、jQuery.attr()メソッドの場合は、HTML上の属性値を書き換えるだけで、jQueryオブジェクトとしてのデータ名に対する値はキャッシュされたままで、jQuery.attr()で設定しなおしてもデータ上の値を再設定することはできません。jQuery.data()の場合は、jQueryオブジェクトとしてのデータ名に対する値は書き換えられるのですが、逆にjQueryのキャッシュ仕様が原因でHTML上には反映しない(HTML属性値は書き換えない)ため、例えばCSSでHTMLの属性値にアクセスするような場合などに属性値に応じたスタイルの変更が反映されない事態などが起こり得ます。このようにjQueryではキャッシュ仕様で、jQuery.data()メソッドを使うにしろ、jQuery.attr()メソッドを使うにしても嵌ることになる要因があるのです。解決策はネイティブJSで再設定すること以上ここまで説明してきた通り、data-*属性にjQuery.data()またはjQuery.attr()でアクセスする場合はキャッシュ仕様前提であることを理解しておく必要があります。そこで煩わしいキャッシュ仕様を回避して、データ属性の値とHTML上の属性値の両方を再設定し直したい場合にはネイティブJavaScriptを使う必要がでてきます。ネイティブJavaScriptにも取得・設定が簡単にできるdatasetという便利なプロパティが用意されているのですが、目新しいプロパティのため、現状ではサポート状況に難があります。Explorerのサポートが11からになるため実質的に使えないという理由があります。setAttribute()メソッドを使うことになります。data-date-of-birth=&quot;2000-10-01&quot;&gt;Jack&lt;/div&gt;すでにJackのデータを記述したHTMLがあるとして、Jackの誕生日を"1999-10-01"に書き換えます。&quot;1999-10-01&quot;;もしdatasetプロパティを使う場合は、jQuery.data()メソッド同様にキャメルケースで記述します。datasetプロパティのサポート状況に注意してください。これだけで無事、データとHTML上の属性値の両方を再設定することができます。試しにjQuery.data()やjQuery.attr()で取得してもキャッシュ仕様による問題を回避できますし、ネイティブJavaScriptで取得してもすべてで期待通りの"1999-10-01"が返ってくることになります。"1999-10-01"IE11から削除されたdocument.createStyleSheetによる不具合例X-UA-Compatibleの指定でIE11をIE10で表示させるContactWeb制作に関するご相談、お気軽にお問い合わせください。/WebデザイナーContactSubscribeTwitterFacebookGoogle+。