HTML を見ると、データ ロール、データ テーマなどの使用がよく見られます。たとえば、ヘッダー効果は次のコードによって実現できます。
<div data-role=header> <h1>私がタイトルです</h1> </div>
data-role=header記述すると、テキストの下部が黒く中央揃えになる効果が得られるのはなぜですか?
この記事では、これらの使用法を誰もが直感的に理解できるように、最も簡単な実装方法を説明します。
HTML ページを作成し、data-chb=header 属性をカスタマイズします。この属性を持つ div 領域の背景色は黒、テキストは白、中央に表示されることを望みます。 data-chb カスタム属性がない場合、HTML コードは次のようになります。
<body> <div data-chb=header> <h1>div に data-chb カスタム属性を使用しました</h1> </div> <br/> <div> data-chb カスタム属性を使用しませんでした. 好きなように表示してください。
背景色が黒、テキストが白、表示が中央に配置される表示効果を実現するには、次の CSS を定義します。
<スタイル> .ui_header { 背景色: 黒; テキスト整列: 色: 白; </style>次に、次の js メソッドを使用して CSS 定義を動的に追加し、ページの読み込み時に data-chb 属性を持つ div の表示スタイルを変更します。
<script type=text/javascript> window.onload=function(){ var elems = document.getElementsByTagName(div); if(elems!=null&&elems.length>0){ var length = elems.length; Control for(var i=0;i<length;i++){ var elem = elems[i]; //コントロールのカスタム属性を取得します。 elem.dataset.chb; //次の方法でもカスタム属性を取得できます //varcustomAttr = elem.dataset[chb]; //それが事前に定義されたヘッダー値であることを意味します。処理済み if(customAttr==header ){ //スタイルを追加 elem.setAttribute(class,ui_header);もちろん、この属性には上記の機能に加えて、JS によるデータの構築、データの埋め込みなどの他の機能もあります。
要約する上記は、編集者によって紹介された HTML5: 'data-' 属性です。ご質問がございましたら、メッセージを残してください。編集者がすぐに返信します。また、VeVb武道サイトを応援してくださった皆様、誠にありがとうございました！