HTML5 の data-* カスタム属性とは何ですか?

HTML5 の data-* カスタム属性

HTML5 には、data-* カスタム属性であるカスタム データ属性という新しい機能が追加されています。 HTML5 では、data- をプレフィックスとして使用して、データを保存するために必要なカスタム属性を設定できます。もちろん、定義とデータ アクセスは、高度なブラウザのスクリプトを通じて実行できます。プロジェクトの実践に非常に役立ちます。現在、このアプローチを採用するフレームワークは数多くありますが、最も一般的なのは jQueryMobile です。
具体的な使用例は次のとおりです:

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家"></p>

従来の方法では、次のように jquery で使用できます:

$("#head").attr("data-home");  
$("#head").attr("data-home","new");

または純粋な js メソッド:
IE ブラウザでは、オブジェクトを取得した後に直接呼び出すことができます

document.getElementById("head").["data-home"];  
document.getElementById("head").["data-home"] = "new";

Firefox と Google Chrome では、getAttribute メソッドを通じて呼び出すことができます:

document.getElementById("head").getAttribute("data-home");  
document.getElementById("head").setAttribute("data-home","new");

HTML5 の簡潔な操作メソッド: (dataset 属性は data-*custom 属性の値にアクセスします)
このように、The 要素のdataset 属性を使用して、data-* カスタム属性の値にアクセスします。 dataset 属性は HTML5 JavaScript API の一部であり、選択されたすべての要素の data- 属性を含む DOMStringMap オブジェクトを返すために使用されます。
このメソッドを使用する場合、data-home などの完全な属性名を使用してデータにアクセスするのではなく、data- プレフィックスを削除する必要があります。
もう 1 つ注意すべき点は、データ属性名にハイフンが含まれている場合 (例: data-date-of-birth)、ハイフンが削除され、以前の属性名が dateOfBirth のようにキャメルケースの名前に変換されることです。 。

<p id = "head" data-home = "http://blog.csdn.net/xmtblog" data-author = "伪专家" data-date-of-birth>QQ群：135430763</p>  <script type="text/javascript">  
    var el = document.querySelector(&#39;#head&#39;);  
    console.log(el.id);   
    console.log(el.dataset);//一个DOMStringMap  
    console.log(el.dataset.home);   
    console.log(el.dataset.author);   
    console.log(el.dataset.dateOfBirth);   
    el.dataset.dateOfBirth = &#39;1985-01-05&#39;; // 设置data-date-of-birth的值.  
    //判断属性  
    console.log(&#39;testAttr&#39; in el.dataset);//false  
    el.dataset.testAttr = &#39;testAttr&#39;;  
    console.log(&#39;testAttr&#39; in el.dataset);//true  </script>

データ属性を削除したい場合は、delete el.dataset.home; または el.dataset.home = null; を実行できます。
このように操作するととても便利だと思いませんか？ただし、一部のブラウザはまだサポートしていない可能性があります。したがって、この期間中は getAttribute と setAttribute を使用して操作または jquery で使用するのが最適です。
データ属性セレクター
実際の開発中、カスタマイズされたデータ属性に基づいて関連する要素を選択できます。たとえば、要素を選択するには、querySelectorAll を使用します。
//「data-p」属性を含むすべての要素を選択します
document.querySelectorAll ('[data-p]') ;
//「data-a-」属性を含むすべての要素を選択します。 href' 属性値は赤い要素です
document.querySelectorAll ('[data-a-href="#"]')
同様に、次のような data-attribute 値を通じて対応する要素に CSS スタイルを設定することもできます。次の例:

<style type ="text/css">  
    .head {  
         width : 256px ;  
         height : 200px ;  
     }  

    .head[data-a=&#39;btn-a&#39;] {  
         color : brown  
    }  

    .head[data-a=&#39;btn-color&#39;] {  
         color : red  
    }  
</style>  
<p class = "head" data-qq = "7" data-a = "btn-a" > button按钮 </p>  
<p class = "head" data-qq = "1" data-a = "btn-color" > button按钮</p>

以上がHTML5 の data-* カスタム属性とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。