この記事では、主にHTML5に標準属性とカスタム属性を紹介します。この記事では、JavaScriptがDOMを操作する場合、カスタム属性へのアクセスに関するいくつかの関連する知識ポイントについても説明しています。非常にお勧めします。それを必要とする友達はそれを参照できます。
HTML5構文に記載されているように、要素には、要素のさまざまなプロパティを設定するための属性を含めることができます。
一部のプロパティはグローバルとして定義され、任意の要素で使用できますが、他のプロパティは要素固有として定義されます。すべてのプロパティには名前と値があり、次の例のように見えます。
以下は、div要素に属性と値の名前の例を使用してタグ付けする方法を示すHTML5属性を使用した例を示します。
<div class = example> ... </div>
属性は開始タグでのみ指定でき、最後のタグでは使用しないでください。
HTML5属性はケースに依存しないものであり、すべての資本または混合を使用できますが、最も一般的な慣習は常に小文字を使用することです。
標準属性以下にリストされているプロパティは、ほぼすべてのHTML5タグによってサポートされています。
| 財産 | オプション | 関数 |
| AccessKey | ユーザー定義 | 要素にアクセスするためのキーボードショートカットを定義します。 |
| 整列します | 右、左、中央 | ラベルを水平に並べます。 |
| 背景 | URL | 要素の背後に背景画像を設定します。 |
| bgcolor | 値、16進価値、RGB値 | 要素の後ろに背景色を設定します。 |
| クラス | ユーザー定義。 | 要素を分類して、カスケードスタイルのシートの使用を容易にします。 |
| 満足できる | 本当、偽 | ユーザーが要素のコンテンツを編集できるかどうかを定義します。 |
| ContextMenu | メニューID | 要素のコンテキストメニューを定義します。 |
| data-xxxx | ユーザー定義。 | カスタムプロパティ。 HTMLドキュメントの著者は、自分のプロパティを定義できます。カスタムプロパティはデータから開始する必要があります。 |
| ドラッグ可能 | True、false、auto | ユーザーが要素をドラッグできるかどうかを定義します。 |
| 身長 | 数値値 | テーブル、画像、またはテーブルセルの高さを定義します。 |
| 隠れた | 隠れた | 要素が表示されるべきかどうかを定義します。 |
| id | ユーザー定義。 | カスケードスタイルのシートを簡単に使用できる要素に名前を付けます。 |
| アイテム | 要素のリスト。 | 要素を組み合わせるために使用されます。 |
| ItemProp | エントリのリスト。 | エントリを組み合わせるために使用されます。 |
| スペルチェック | 本当、偽 | 要素にスペルを備えているかエラーチェックが必要かを定義します。 |
| スタイル | CSS StyleSheet。 | 要素のインラインスタイルを定義します。 |
| 主題 | ユーザー定義ID。 | 要素に関連付けられたエントリを定義します。 |
| Tabindex | タブ番号 | 要素のタブのキー順序に決定されます。 |
| タイトル | ユーザー定義。 | 要素のポップアップタイトル。 |
| ヴァリシング | 上、中央、下 | HTML要素内のタグの垂直アライメント。 |
| 幅 | 数値。 | テーブル、画像、テーブルセルの幅を定義します。 |
HTML5は、カスタムデータ属性を追加する新しい機能も導入しています。
カスタムデータ属性はデータから始まり、ニーズに基づいて名前が付けられます。簡単な例を次に示します。
<div class =例Data-subject = Physics data-level = complex>
...
</div>
上記の例では、HTML5では、データサブジェクトとデータレベルと呼ばれる2つのカスタムプロパティが完全に有効です。また、JavaScript APIを使用するか、同様の方法でCSSで値を取得して標準属性を取得することもできます。
HTML要素にカスタム属性を追加し、JavaScriptを介してアクセスします。以前に試したことがある場合は、タグの確認を無視するのは簡単で、HTML5は有効なWebページ内で独自の要素属性を作成および使用する機能を提供できます。
HTML5ファイルを作成します。
使用するものがわからない場合は、次のコードをコピーできます。
XML/HTMLコードコピーコンテンツにクリップボードに