wulin.comの記事紹介（www.vevb.com）：HTML5でカスタム属性の実装は技術的に複雑ではありません。本当の難しさは、使用することを選択した方法がプロジェクトに適しているかどうかです。該当する場合、それをより効果的にする方法は？データセットメソッドをページ関数として有効にするには時期尚早であることを忘れないでください。結局のところ、多くのブラウザはこの機能をサポートしていません。
HTML5開発は本格的であり、HTML5でのカスタム属性の使用は、開発者の間で徐々に人気を博しています。さらに、Web開発のセマンティクスにも重要な役割を果たしています。この記事では、実用的な例を通じて、JavaScript関数を含むHTML5カスタムデータプロパティの作成とアクセスについて説明します。
HTML5を使用する前に、最初にHTML要素にカスタム属性を追加し、JavaScriptを介してアクセスします。以前に試したことがある場合は、タグの確認を無視するのは簡単で、HTML5は有効なWebページ内で独自の要素属性を作成および使用する機能を提供できます。
HTML5ファイルを作成します。
使用するものがわからない場合は、次のコードをコピーできます。
<！doctype html>
<html>
<head>
<スクリプト>
/*ここで機能*/
< /script>
< /head>
<body>
< /body>
< /html>
ボディにカスタム要素を設定し、ヘッドのスクリプト領域の一部にJavaScript要素を使用してアクセスします。
要素の作成：
まず、JavaScriptの例を認識できるように、いくつかの簡単なコンテンツとカスタム属性、IDなどの要素を追加します。
<div id = product1 data-product-category = clothing>
コットンシャツ
</div>
ご覧のとおり、カスタム属性は次の形式です。データ - *、データセクションまたは選択した名前に名前を設定します。これを行う唯一の方法は、HTML5でカスタムプロパティを使用することです。したがって、Webページが有効であることを確認する場合は、この方法を使用できます。
もちろん、プロジェクトの詳細の部分では、カスタムプロパティがあなたに役立つかどうか、そしてそれをどのように命名するかを決定します。この例は、さまざまな製品カテゴリの小売Webサイトに適用できます。
カスタムプロパティを使用すると、ページ内のJavaScriptコードを特別な方法で使用して、アニメーション表示機能などの要素を設定できます。標準のHTML要素がない場合は、カスタムプロパティを使用することをお勧めします。
テストボタンを追加します
次のコードがページに追加されている場合、イベントはページ上の独自のJavaScript要素を使用して実行できます。
<入力タイプ=ボタン値= aTTRIBUTE ONCLICK = getElementAttribute（ 'Product1'）/>
属性を取得する：
JavaScriptのプロパティにアクセスする最も一般的な方法は、Getattributesを使用することです。これも最初のステップです。ページのヘッドスクリプト領域に次の関数を追加します。
関数getElementAttribute（Elemid）{
var theElement = document.getElementById（Elemid）;
var theattribute = theElement.getAttribute（ 'data-product-category'）;
アラート（TheTtribute）;
}
ここでは、この例にアラート値を追加しました。もちろん、自分のニーズに応じてスクリプトに追加することもできます。
データを取得：
Dom getattributesの代わりに要素データセットを使用できます。これは、特に複数の属性を介してコードが反復する場合がありますが、データセットに対するブラウザのサポートはまだ非常に低いため、このコードを念頭に置いて、//メソッドと同じプロセスを実行できます。
// var theattribute = theElement.getAttribute（ 'data-product-category'）; var theattribute = theelement.dataset.productcategory;
データ - 属性名から始まるデータセットでデータを削除しますが、HTMLに含まれています。
カスタムプロパティ名にハイフンがある場合、データを介してアクセスするとラクダケースの形式が表示されることに注意してください。
他のモジュールと関数
このプロパティを取得しましたが、スクリプトを設定して削除することができます。次のコードは、標準のJavaScriptモジュールとデータセットを使用してプロパティを設定する方法を示しています。
DOMメソッドまたはデータセットを使用して、特定の属性を削除することもできます。
// DOMメソッド
theElement.RemoveAttribute（ 'Data-Product-category'）;
//データセットバージョン
theelement.dataset.productcategory = null;
結論：
HTML5にカスタムプロパティを実装することは、技術的に複雑ではありません。本当の難しさは、使用することを選択した方法がプロジェクトに適しているかどうかです。もしそうなら、どうすればそれをより効果的にすることができますか？データセットメソッドをページ関数として有効にするには時期尚早であることを忘れないでください。結局のところ、多くのブラウザはこの機能をサポートしていません。