HTML5 の実践と分析のカスタムデータ属性について話すとき、当時私が屋外で JavaScript を学習していたときのことを思い出します。それは鶏の血を持っているようなもので、いつもとても興奮していました。当時からカスタムプロパティについては聞いていました。カスタム属性について紹介します。

HTML5の実戦と分析：データ属性のカスタマイズ方法

カスタム属性、タグ部分にいくつかのカスタム属性を追加することができ、意図的にいくつかの接頭辞を付ける必要はありません。ただし、HTML5 で新しく追加されたカスタムデータ属性は、以前のカスタム属性とは異なります。 HTML5 では、要素に非標準の属性を追加できますが、その目的は、レンダリングに関係のない情報、またはセマンティック情報を要素に提供することです。 data- で始まる属性をタグに追加します。「-」の後の名前は任意です。小さな例は次のとおりです。

HTMLコード

梦龙小站

ログイン後にコピー

HTML5の実戦と分析：カスタムデータ属性（データセット）の取得方法

カスタムデータ属性を追加した後は、要素のデータセット属性を通じてカスタム属性の値にアクセスできます。データセット属性の値は DOMStringMap のインスタンスです。 DOMStringMap は、名前と値のペアのマッピングです。このマッピングでは、data-name の形式の各属性には対応する属性がありますが、属性名には data- プレフィックスがありません (たとえば、カスタム属性が data-myname の場合、マッピング内の対応する属性はは私の名前です）。小さな例は次のとおりです。

HTML コード

梦龙小站

ログイン後にコピー

JavaScript コード

window.onload = function(){ var op = document.getElementById("meng"); //获取自定义数据属性 var oLong = op.dataset.long; var oLi = op.dataset.li; alert(oLi) //设置自定义数据属性 op.dataset.long = 123456; op.dataset.li = "lml"; //有没有"meng"值 if(op.dataset.long){ alert("long:" + op.dataset.long); //long:123456 } };

ログイン後にコピー

プレビュー効果

HTML5 の実践とカスタムデータ属性 (データセット) の分析

他の処理のために要素に非表示のデータを追加する必要がある場合は、カスタムデータ属性を使用する必要があります。リンクやマッシュアップの追跡では、カスタムデータ属性を使用すると、クリックがページのどの部分から来たのかを簡単に知ることができます。データセット属性でサポートされているブラウザは、Firefox 6 以降と Chrome です。

HTML5 の実戦と分析のカスタムデータ属性をここで紹介します。HTML5 のカスタムデータ属性は、以前のカスタムデータ属性と大きな違いはありません。その主な理由は、データセット属性を通じて取得および設定できることです。名前を付けるときは、その前に接頭辞「data-」を追加します。実際の戦闘と HTML5 の分析の詳細については、Menglong Station の関連アップデートに注目してください。

上記は HTML5 の実戦とカスタムデータ属性 (データセット) の分析の内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。