コメント：HTML5は、カスタムデータ属性、つまりdata-*カスタム属性に新しい機能を追加しました。 HTML5では、データを備えたプレフィックスを使用して、データを保存するために必要なカスタムプロパティを設定できます。
もちろん、高度なブラウザでは、スクリプトを介してデータを定義およびアクセスできます。プロジェクトの実践で非常に役立ちます。
例えば：
属性メソッドを使用して、データの値にアクセスします - *カスタム属性
属性メソッドを使用してデータの値にアクセスすることは非常に便利です - *カスタム属性：
// getAttributeを使用してデータ属性を取得します
var user = document。 getElementById（ 'user'）;
var username = plant。 getattribute（ 'data-uname'）; // username = 'スクリプトハウス'
var userid = plant。 getattribute（ 'data-uid'）; // userid = '12345'
// setAttributeを使用して、データプロパティを設定します
ユーザー。 setattribute（ 'data-site'、 'http://www.vevb.com'）;
このメソッドはすべての最新のブラウザで正常に機能しますが、使用に使用されるのはHTML 5のカスタムデータ - *属性ではありません。
<div id = "user" uid = "12345" uname = "scrite house"> </div>
<スクリプト>
// getAttributeを使用してデータ属性を取得します
var user = document。 getElementById（ 'user'）;
var username = plant。 getattribute（ 'uname'）; // username = 'スクリプトハウス'
var userid = plant。 getattribute（ 'uid'）; // userid = '12345'
// setAttributeを使用して、データプロパティを設定します
ユーザー。 setattribute（ 'site'、 'http://www.vevb.com'）;
</script>
この「元の」カスタム属性は、上記のデータ - *カスタム属性と違いはありません。知識属性名は異なります。
データセット属性は、データの値にアクセスします。*カスタム属性
これにより、要素のデータセット属性にアクセスして、データセット属性値にアクセスします。*カスタム属性。このデータセットプロパティは、HTML5 JavaScript APIの一部であり、選択されたすべての要素データ属性を持つDomstringMapオブジェクトを返すために使用されます。
この方法を使用する場合、data-uidなどの完全な属性名を使用する代わりに、データプレフィックスを削除する必要があります。
別の特別な注意事項は、データ属性名にハイフンが含まれている場合、たとえば、データ日付の出生者、ハイフンが削除され、ラクダのような命名に変換されます。前の属性名は変換する必要があります：dateofbirth。
<div data-id = "1234567890" data-name = "scrite house" data-date-of-birth> door </div>
<script type = "text/javascript">
var el = document.queryselector（ '＃user'）;
console.log（el.id）; //「ユーザー」
console.log（el.dataset）; // domstringmap
console.log（el.dataset.id）; // '1234567890 '
console.log（el.dataset.name）; //「スクリプトハウス」
console.log（el.dataset.dateofbirth）; // ''
el.dataset.dateofbirth = '1985-01-05'; // data-date-of-birthの値を設定します。
console.log（ 'somedataattr' in el.dataset）; // false
el.dataset.somedataattr = 'mydata';
console.log（ 'somedataattr' in el.dataset）; // true
</script>
データプロパティを削除する場合は、これを行うことができます。ELを削除します。データセット。 ID;またはel .dataset。 id = null; 。
ハハ、残念ながら、新しいデータセット属性はChrome 8+ Firefox（Gecko）6.0+ Internet Explorer 11+ Opera 11.10+ Safari 6+ブラウザーにのみ実装されているため、この期間中に最適に使用するのに最適なgetattribute and setattributeが稼働します。
データプロパティセレクターについて
実際の開発では、それが有用であると感じるかもしれません。カスタムデータ属性に基づいて関連要素を選択できます。たとえば、QuerySeLectorAllを使用して要素を選択します。
//「データフローリング」属性を含むすべての要素を選択します
書類 。 QuerySeLectorAll（ '[data-flowering]'）;
//「data-text-colour」属性値を持つすべての要素を選択します
書類 。 querySelectorall（ '[data-text-colour = "red"]'）;
同様に、次の例など、データ属性値を使用して、対応する要素のCSSスタイルを設定することもできます。
<style type = "text/css">
.user {
幅：256px;
高さ：200px;
}
.user [data-name = 'feiwen'] {
色：茶色
}
.user [data-name = 'css'] {
色：赤
}
</style>
<div class = "user" data-id = "123" data-name = "feiwen"> 1 </div>
<div class = "user" data-id = "124" data-name = "css"> pier </div>