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

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>

ここで、データ属性をキャプチャする必要があるとします。 「data-」で始まり、特定の値の JSON 表現を抽出します。最初は、これを試行すると null 値またはエラーが発生する可能性があります:

<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>

これを解決するには、すべてのデータ属性のマップのようなコレクションを提供するデータセット プロパティにアクセスする必要があります。修正された 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>

これにより、目的の値が正常に取得されます:

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

データセット プロパティを利用することで、JavaScript でデータ属性に簡単にアクセスして操作できます。コードの制御と柔軟性をさらに高めることができます。

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