接頭辞データ属性とデータセットの使用方法

今回は、プレフィックス data-attribute と dataset の使用方法を説明します。プレフィックス data-attribute と dataset を使用する際の 注意事項 について、実際のケースを見てみましょう。

HTML5 では、レンダリングに関係のない要素の情報を提供したり、セマンティック情報を提供したりするために、非標準の属性を要素に追加できると規定していますが、接頭辞として data- を付けます。これらの属性は、data- で始まる限り、任意に追加し、任意に名前を付けることができます。カスタム属性を追加した後、要素のデータセット属性を通じてカスタム属性の値にアクセスできます。

<p id="box" data-name=&#39;ghostwu&#39; data-age=&#39;22&#39; , data-sex=&#39;man&#39;>ghostwu tell you how to learn html5</p>
    <script>
        var oBox = document.querySelector("#box");
        console.log( oBox.dataset ) ;
        var myName = oBox.dataset.name;
        var myAge = oBox.dataset.age;
        var mySex = oBox.dataset.sex;
        if( oBox.dataset.name ) {
            console.log( oBox.dataset.name );
        }
    </script>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

H5のドラッグアンドドロップ機能の詳細な説明

H5のCanvasは円形の進行状況バーを作成し、数値パーセンテージを表示します

H5のLocalStorageローカルストレージ使用量の詳細な説明

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