JavaScript 要素のデータ属性にどのようにアクセスしますか?

JavaScript でのデータ属性の取得

data-type や data-point などのデータ属性を持つ HTML 要素を扱う場合、 JavaScript での値は難しい場合があります。これらのデータ属性を JavaScript コードで取得する方法を見てみましょう。

データセットを使用したデータ属性へのアクセス

データセット プロパティを使用すると、その名前を持つ要素のすべてのデータ属性にアクセスできます。 「data-」で始まります。特定のデータ属性の値を取得するには、「data-」接頭辞を付けずにプロパティ名を使用するだけです。たとえば、data-type 属性の値を取得するには、this.dataset.type を使用します。

使用例

次の HTML 要素について考えてみましょう。

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

この要素でイベントが発生すると、イベント ハンドラー関数内でそのデータ属性にアクセスできます:

<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: "H. Pauwelyn"
  });
});</code>

Result

json 変数には、データ属性の値を持つオブジェクトが含まれます:

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

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