JavaScript コードでデータ属性にアクセスして使用するにはどうすればよいですか?

JavaScript コードでのデータ属性の取得

指定された HTML 要素の JavaScript コードで「data-」で始まる属性にアクセスするには、次のようにします。以下のコードに示すように、データセット プロパティを利用する必要があります:

<code class="js">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid), // Accessing data-typedId attribute
    subject: this.dataset.type, // Accessing data-type attribute
    points: parseInt(this.dataset.points), // Accessing data-points attribute
    user: "H. Pauwelyn"
  });
});</code>

このコードを実行すると、json 変数には次の値を持つオブジェクトが含まれます:

{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "H. Pauwelyn"
}

この手法を使用すると、JavaScript コードでデータ属性に簡単にアクセスして利用できるようになり、HTML マークアップのカスタム属性の管理と操作が簡素化されます。

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