JavaScript でデータ属性にアクセスして使用する方法?

JavaScript でのデータ属性の値へのアクセス

HTML では、データ属性は、要素の外観に影響を与えることなく要素に関する追加情報を格納する方法を提供します。プレゼンテーション。 JavaScript コードでこれらの属性にアクセスするには、dataset プロパティを使用する必要があります。

さまざまなデータ属性を持つ次の HTML 要素を考えてみましょう:

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

これらのデータ属性の値を取得するには、 JavaScript コードで使用する場合は、次のように記述します。

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});</code>

データセット プロパティは、要素のすべてのデータ属性を含むオブジェクトを返します。プロパティ名は、元の属性名に「data- " プレフィックスが削除されました。上記のコードでは、このオブジェクトを使用して JSON オブジェクトを設定し、その後の処理に使用したり、サーバーに送信したりできます。

このコードの結果は、オブジェクトを表す JSON 文字列になります。

<code class="json">{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "Luïs"
}</code>

これは、データセット プロパティを使用して JavaScript コード内のデータ属性の値にアクセスする方法を示し、さまざまな目的でこの情報を簡単に抽出および操作できるようにします。

以上がJavaScript でデータ属性にアクセスして使用する方法?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。