カスタム属性 - データ - *

まず、基本的な概念

 

実際には、HTML5でプロパティをカスタマイズするデータ - *方法を追加しました、いわゆるデータ - *属性は、データ - 接頭辞を加えたカスタムの名前、データストレージのためのこのような構造の使用です。データ - *使用現在の状況は、カスタムプロパティ管理の混乱なしに解決することができます。

 

第二に、ネイティブカスタムJS属性

 

1は、カスタムプロパティを設定します

 

カスタムプロパティは、次の2つの方法を提供します。

 

（1）第一の方法は、HTMLタグの上に直接書き込むことです。

< H2 データ・天気天気=「雨」>ファイン今日</ H2 >

 

上記のデータ天候は、カスタム属性値の雨です。

カスタムプロパティセットは、複数の単語の組み合わせがある場合に留意すべきで設定した時間によって、このように、ということ、そして、ダッシュを使用する必要があります（ - ）のようなリンク：

< H2 データ-誕生-DATE = "19940219" >ファイン今日</ H2 >

 

 

（2）第二のモードは、データセットの属性のJSによって設定されます。

// HTML 
<H2>素敵な一日</ H2> // JSのVAR H2 = document.querySelector（ 'H2' ）; 
h2.dataset.weather = "雨"。

 

このような性質は、カスタム・データ・weater、雨の値を設定し、HTML5の要素が設定されDOMStringMapキーと値のペアのタイプであるデータセットの属性があります。

このようにしてもセットが複数の単語の組み合わせである場合、次いで、ラクダ命名法を使用して記述する必要があることに留意すること。

// HTML 
<H2>素敵な一日</ H2> // JSのVAR H2 = document.querySelector（ 'H2' ）; 
h2.dataset.birthDate = "19940219";

 

2、JS読みカスタムプロパティ

 データセットのプロパティを介して読み込む場合、カスタム属性を取得するために使用、あなたがデータ - 接頭辞を削除する必要があり、ハイフンはキャメルケースに変換されなければなりません「」。：

// HTML（設定） 
<= H2天気-データ"雨"データ-誕生-DATE = "19940219">ファイン今日</ H2> // JS（読み込み）するvar H2 = document.querySelector（ 'H2' ）; 
にconsole.log（h2.dataset.weather）;    // 雨 
にconsole.log（h2.dataset.birthDate）;    // 19940219

 

3、CSS読みカスタムプロパティ

また、カスタムスタイル属性を記述することができます。

H3 [データ出生日付=「19940219」] { 
    色：赤。
}

結果が示されています。