HTML5_html5 チュートリアル スキルにおける標準属性とカスタム属性の包括的な分析

HTML5 構文で説明したように、要素には、要素のさまざまなプロパティを設定するための属性を含めることができます。

一部のプロパティはグローバルとして定義され、任意の要素で使用できますが、その他のプロパティは要素固有として定義されます。すべてのプロパティには、以下の例のような名前と値があります。

これは HTML5 属性の使用例であり、class という名前の属性と値「example」で div 要素をマークする方法を示しています。

...

属性は開始タグでのみ指定でき、終了タグでは使用しないでください。

HTML5 属性は大文字と小文字を区別せず、すべて大文字または大文字と小文字の混合で使用できますが、最も一般的な規則は常に小文字を使用することです。

標準属性
以下にリストされている属性は、ほぼすべての HTML5 タグでサポートされています。

属性	选项	功能
accesskey	用户自定义	定义访问元素的键盘快捷键。
align	right, left, center	水平对齐标签。
background	URL	在元素后面设置一个背景图像。
bgcolor	数值，十六进制值，RGB值	在元素后面设置一个背景颜色。
class	用户定义。	分类一个元素，便于使用级联样式表。
contenteditable	true, false	定义用户是否可以编辑元素的内容。
contextmenu	Menu id	为元素定义上下文菜单。
data-XXXX	用户定义。	自定义属性。 HTML 文档的作者可以定义自己的属性。 自定义属性必须以 "data-" 开头。
draggable	true,false, auto	定义用户是否可以拖动元素。
height	数字值	定义表格，图像或表格单元的高度。
hidden	hidden	定义元素是否应该可见。
id	用户定义。	命名元素，便于使用级联样式表。
item	元素列表。	用于组合元素。
itemprop	条目列表。	用于组合条目。
spellcheck	true, false	定义元素是否必须有拼写或错误检查。
style	CSS 样式表。	给元素定义内联样式。
subject	用户定义 id。	定义元素关联的条目。
tabindex	Tab number	定于元素的 tab 键顺序。
title	用户定义。	元素的“弹出”标题。
valign	top, middle, bottom	HTML 元素内标签的垂直对齐方式。
width	数字值。	定义表格，图像和表格单元的宽度。

属性 オプション 関数 アクセスキー ユーザー定義 要素にアクセスするためのキーボード ショートカットを定義します。 整列 右、左、中央 ラベルを水平方向に揃えます。 背景 URL 要素の背後に背景画像を設定します。 背景色 数値、16進数値、RGB値 要素の背後に背景色を設定します。 クラス ユーザー定義。 カスケード スタイル シートの使用を容易にするために要素を分類します。 コンテンツ編集可能 真、偽 ユーザーが要素のコンテンツを編集できるかどうかを定義します。 コンテキストメニュー メニューID 要素のコンテキスト メニューを定義します。 データ-XXXX ユーザー定義。 カスタム属性。 HTML ドキュメントの作成者は、独自の属性を定義できます。 カスタム プロパティは「data-」で始まる必要があります。 ドラッグ可能 true、false、自動 ユーザーが要素をドラッグできるかどうかを定義します。 高さ 数値 表、画像、または表のセルの高さを定義します。 非表示 非表示 要素を表示するかどうかを定義します。 ID ユーザー定義。 という名前の要素を使用して、カスケード スタイル シートの使用を容易にします。 アイテム 要素リスト。 は要素を結合するために使用されます。 アイテムプロップ エントリのリスト。 はエントリを結合するために使用されます。 スペルチェック 真、偽 要素にスペル チェックまたはエラー チェックが必要かどうかを定義します。 スタイル CSS スタイルシート。 は要素のインライン スタイルを定義します。 件名 ユーザー定義の ID。 は、要素に関連付けられた項目を定義します。 タブインデックス タブ番号 は要素のタブ オーダーによって決まります。 タイトル ユーザー定義。 要素の「ポップアップ」タイトル。 バライン 上、中、下 HTML 要素内のタグの垂直方向の配置。 幅 数値。 表、画像、表のセルの幅を定義します。 テーブル>

カスタム属性
HTML5 には、カスタム データ属性を追加する新機能も導入されています。

カスタム データ属性は data- で始まり、ニーズに基づいて名前が付けられます。簡単な例を次に示します:

...

上記の例のうち 2 つ カスタムdata-subject および data-level と呼ばれる属性は、HTML5 では完全に有効です。標準プロパティと同様の方法で、JavaScript API または CSS を使用して値を取得することもできます。

HTML 要素にカスタム属性を追加し、JavaScript を通じてアクセスします。これまでに試したことがある場合は、タグの検証を無視するのが簡単であることがわかります。HTML5 では、その中で独自の要素を作成して使用することができます。有効な Web ページの属性関数。

HTML5 ファイルの作成:

どれを使用するかをまだ決めていない場合は、以下のコードをコピーできます:

XML/HTML コードコンテンツをクリップボードにコピー

2. >
4. <
5. html
6. >
8. <
9. 頭
10. >
12. <
13. スクリプト
14. >
16. /*ここに関数があります*/
18. スクリプト
19. >
22. 頭
23. >
25. <
26. 本体
27. >
30. 本体
31. >
34. html
35. >

本文にカスタム要素を設定し、ヘッド スクリプト領域の JavaScript 要素を使用してそれらにアクセスします。

要素の作成:

まず、JavaScript の例を識別できるように、いくつかの単純なコンテンツとカスタム属性や ID などの要素を追加します。

XML/HTML コードコンテンツをクリップボードにコピー

1. <
2. div id="product1" データ商品カテゴリ=「衣類」
3. >
5. コットンシャツ
7. div
8. >

ご覧のとおり、カスタム属性は「data-*」という形式になっており、「data-」部分に名前を設定するか、任意の名前を設定します。 HTML5 でカスタム属性を使用します。これが機能する唯一の方法です。したがって、この方法は、Web ページが有効かどうかを確認する場合にのみ使用してください。

もちろん、プロジェクトの詳細によって、カスタム プロパティが役立つかどうか、またその名前の付け方は決まります。この例は、さまざまな製品カテゴリにわたる小売 Web サイトに適用できます。

カスタム属性を使用すると、ページ内で JavaScript コードを使用して、表示機能をアニメーション化するなど、特別な方法で要素を設定できます。標準の HTML 要素がない場合は、カスタム属性を使用することをお勧めします。

テストボタンを追加

次のコードがページに追加されている場合、ページ上で独自の JavaScript 要素を使用してイベントを実行します。

XML/HTML コードコンテンツをクリップボードにコピー

1. <
2. 入力 type="ボタン" 値="属性の取得" onclick="getElementAttribute ('product1')"
3. />

属性の取得:

JavaScript で属性にアクセスする最も一般的な方法は、「getAttributes」を使用することです。これは、最初に実行する必要があるステップでもあります。ページのヘッドスクリプト領域に次の関数を追加します:

JavaScript コードコンテンツをクリップボードにコピーします

1. 関数 getElementAttribute(elemID) {
2. var theElement = document.getElementById(elemID);
3. var theAttribute = theElement.getAttribute('data-product-category'); alert(属性)
4. }

5. ここでは、アラート値を例に追加しました。もちろん、必要に応じてスクリプトに追加することもできます。

   データの取得:

   DOM "getAttributes" の代わりに要素データセットを使用できます。これは、特にコードが複数の属性を反復処理する特定のケースでは、より効率的である可能性があります。ただし、データセットに対するブラウザのサポートはまだ非常に低いことに留意してください。 , このコードは // 以降のメソッドと同じ処理を実行します。

   //var theAttribute = theElement.getAttribute('data-product-category');
   var theAttribute = theElement.dataset.productCategory;
   データセットの属性名から「data-」を削除します。まだ HTML に含まれています。

   カスタム属性名にハイフンが含まれている場合、データ経由でアクセスするとキャメルケース形式で表示されることに注意してください。つまり、(「data-product-category」は「productCategory」になります)。

   その他のモジュールと関数

   プロパティを取得しましたが、スクリプトは引き続きプロパティを設定および削除できます。以下のコードは、標準の JavaScript モジュールとデータセットを使用してプロパティを設定する方法を示しています。

   JavaScript コードコンテンツをクリップボードにコピーします

   1. //DOM メソッド
   3. theElement.setAttribute('data-product-category', 'sale');
   4. //データセットのバージョン
   theElement.dataset.productCategory =
   6. 「セール」; DOM メソッドまたはデータ セットを使用して属性を削除することもできます:
   //DOM メソッド
   9. theElement.removeAttribute(
   'data-product-category'
   10. ); //データセットのバージョン
   11. theElement.dataset.productCategory = null
   ;
   12. HTML5 でのカスタム属性の実装は、技術的にはそれほど複雑ではありません。実際に難しいのは、使用する方法がプロジェクトに適しているかどうか、また、適している場合はどうすればよいかということです。多くのブラウザーはまだこの機能をサポートしていないため、データセット メソッドをページ機能として有効にするのは時期尚早であることに注意してください。