コメント：jQueryモバイルを使用すると、データロール、データテーマなどの使用がよく見られることがよくあります。これらはHTML5カスタム属性です。この記事はいくつかをまとめました。それを必要とする友達はそれを参照できます。
たぶん、JQuery Mobileを使用すると、データロール、データテーマなどがよく表示されます。たとえば、次のコードでは、ヘッダーの効果を実現できます。
<div data-role = "header">
<h1>私はタイトル</h1>です
</div>
携帯電話を閲覧すると、効果は次のとおりです。
データロール=ヘッダーを書くことで、下部に黒の効果を実現し、テキストを中心にすることができるのはなぜですか？
この記事は、それを実装する最も簡単な方法を提供します。そうすれば、誰もがこれらの使用法を直感的に理解できるようにします。
HTMLページを作成して、data-chb = header属性をカスタマイズします。この属性を備えたDiv領域の背景色が黒で、テキストが白で、中心が表示されることを願っています。 Data-CHBカスタム属性を持たないDIVは、デフォルトモードで表示されます。 HTMLコードは次のとおりです。
<body>
<div data-chb = "header">
<H1>データCHBカスタム属性のDIVを使用しました</h1>
</div>
<br/>
<div>
属性をカスタマイズするためにデータCHBを使用しなかったので、それらを必要とするように表示します。
</div>
</body>
黒い背景色、白いテキスト、センターディスプレイのディスプレイ効果を実現するために、次のCSSを定義します。
<style>
.ui_header {
背景色：黒;
テキストアライグ：センター;
色：白;
国境：1pxソリッド＃000;
}
</style>
次に、次のJSメソッドを使用して、ページがロードされたときにCSS定義を動的に追加し、dat-chb属性を使用してdivの表示スタイルを変更します。
<script type = "text/javascript">
window.onload = function（）{
var elems = document.getElementsByTagname（ "div"）;
if（elems！= null && elems.length> 0）{
var length = elems.length;
//すべてのdivコントロールを輸送します
for（var i = 0; i <length; i ++）{
var elem = elems [i];
//コントロールのカスタムプロパティを取得します
var customattr = elem.dataset.chb;
//次の方法でカスタムプロパティを取得することもできます
// var customattr = elem.dataset ["chb"];
//事前に定義されたヘッダー値である場合、それは処理する必要があることを意味します
if（customattr == "header"）{
//スタイルを追加します
elem.setattribute（ "class"、 "ui_header"）;
}
}
}
}
</script>
最終ページには、次の効果が表示されます。
人々は常にHTMLタグにカスタムプロパティを追加して、データを保存および操作するのが好きです。しかし、これを行うことの問題は、他のスクリプトが将来カスタムプロパティをリセットするかどうかがわからないことです。さらに、HTML構文はHTML仕様や他の副作用に準拠していません。これが、HTML5仕様にカスタムデータプロパティを追加した理由であり、多くの便利なことを行うことができます。
HTML5の詳細な仕様を読むことができますが、このカスタムデータ属性の使用法は非常に簡単です。データから始まる任意の属性をHTMLタグに追加できます。これらの属性はページに表示されません。ページのレイアウトやスタイルには影響しませんが、読みやすく書かれています。
次のスニペットは有効なHTML5タグです。
<div
data-myid = "3e4ae6c4e">いくつかの素晴らしいデータ</div>
しかし、このデータをどのように読みますか？ページ要素を繰り返して、必要なプロパティを読み取ることができますが、jQueryにはこれらのプロパティを操作するための組み込みの方法があります。 jQueryの.data（）メソッドを使用して、これらのデータ - *プロパティにアクセスします。メソッドの1つは.Data（OBJ）です。これはjQuery 1.4.3バージョンの後に表示され、対応するデータ属性を返すことができます。
たとえば、次の記述方法を使用して、データmyid属性値を読み取ることができます。
var myid = jquery（ "＃ashow"）。data（ 'myid'）;
console.log（myid）;たとえば、次のHTMLを書く場合、データ - *プロパティでJSON構文を使用することもできます。
<div data-awesome = '{"game"： "on"}'> </div>
JSを介してこのデータに直接アクセスできます。 JSONの重要な値を使用すると、対応する値を取得できます。
var gamestatus = jquery（ "＃ashow-json"）。data（ 'awesome'）。ゲーム;
console.log（gamestatus）;また、.data（key、value）メソッドを使用して、データ - *属性に直接値を割り当てることもできます。あなたが注意する必要がある重要なことは、これらのデータ - *属性が彼らがいる要素に関連しているべきであり、それらを何かを保存するためのストレージツールとして扱わないことです。
翻訳者は付け加えます：data-*はHTML5にのみ表示される属性ですが、jQueryは普遍的です。したがって、非HTML5ページまたはブラウザでは、データを操作するために.Data（OBJ）メソッドを使用できます。