H5 でカスタム属性を取得および設定する方法

要素の属性のカスタマイズは、HTML5 に追加された新機能です。簡単に言えば、カスタム データ属性仕様は、data- で始まる属性名には値を割り当てる必要があることを指定します。カスタム データ属性は、ページまたはアプリケーションのプライベート カスタム データを保存するために使用されます。これらのカスタム データ属性は DOM に保存され、DOM 全体のレイアウトやパフォーマンスには影響しません。ただし、DOM の操作と制御が容易になります。 Web ページ全体の表現効果。
たとえば、オブジェクトを通じて特定のエリア内のすべての都市を取得しますが、次の操作を容易にするために都市に関する他の情報も取得する必要があります。この都市のラベルにカスタム属性を追加して保存することもできます。この領域の他の情報については、操作中に設定した属性名を通じて値を直接取得できるため、私たちとコンピューターの操作量が大幅に増加する可能性があります。
属性の値を保存するときは、文字列である必要があることに注意してください。保存するデータがオブジェクトの場合は、必ず文字列に変換してください

var cityStr = JSON.stringify(cityObj);

JQ は、データ属性値を取得および設定するための 2 つのメソッドを提供しますattr () および data()
パラメーターが 1 つだけ渡される場合、このパラメーターは属性名となり、属性の値を取得するために使用されます。 2 つのパラメーターを渡すと、属性名と属性値が設定されます

 $(selector).attr(attribute,value)

以下は、データを使用してカスタム属性にアクセスする小さなケースです:

<p id="box1"></p><button id="btn1">click1</button><button id="btn2">click2</button></body><script src="../assets/jquery-1.9.1.min.js"></script><script>
    //点击click1向box添加属性student，属性值为tom
    $("#btn1").click(function () {
        $("#box1").data("student","tom")
    });    //通过属性名获取属性值
    $("#btn2").click(function () {
        alert($("#box1").data("student"));
    });</script>

同じ効果を達成するには attr を使用します

<script>
    $("#btn").click(function () {
        $("#box1").attr("data-student","tom")
    });
    $("#btn2").click(function () {
        alert($("#box1").attr("data-student"));
    });</script>

開発者を通じて行うことができますツールから、保存ボタン (click1) をクリックすると、カスタム属性が自動的に box1 に追加されることがわかります。data メソッドを使用して追加すると、ここには data-student="tom" は表示されませんが、引き続き取得できます。その値は「tom」です。この 2 つに大きな違いはなく、引用方法が異なるだけです。属性名の前に
data-を付けるのがH5標準の書き方なので付けておくと良いでしょう。

ここで、

1. カスタム属性名はシステム属性名と同じにすることはできません (例: class、name...)
2. すべての属性値は文字列のみにすることができます。定義
3. HTML5 では、要素のデータ属性をカスタマイズする場合、属性名は data- で始まりますが、実際の属性名には data-

が含まれないと規定されています。

以上がH5 でカスタム属性を取得および設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。