JavaScript でデータ属性にアクセスする方法: `this.typeId` が機能しない理由と代わりに `dataset` を使用する方法

JavaScript でのデータ属性の取得

HTML 要素では、データ属性は追加情報を保存する便利な方法を提供します。ただし、JavaScript でこれらの属性にアクセスするのは難しい場合があります。特定の問題を詳しく調べて、その解決策を探ってみましょう。

課題

次の HTML コードを考えてみましょう:

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

JavaScript では、これらのデータ属性を取得することを目的としています。次に示すように、それらを JSON オブジェクトで使用します。

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.typeId),
    subject: this.datatype,
    points: parseInt(this.points),
    user: "H. Pauwelyn"
  });
});</code>

ただし、this.typeId、this.datatype、th​​is.points を使用してデータ属性にアクセスしようとすると、null が返されます。

解決策

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>

結果の JSON オブジェクトには、目的のデータが含まれます。

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

データセット プロパティを利用することで、データ属性を簡単に取得できます。 JavaScript。コード内でその値を利用できるようになります。

以上がJavaScript でデータ属性にアクセスする方法: `this.typeId` が機能しない理由と代わりに `dataset` を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。