ホームページ > 記事 > ウェブフロントエンド > 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 | 数字值。 | 定义表格,图像和表格单元的宽度。 |
カスタム属性
HTML5 には、カスタム データ属性を追加する新機能も導入されています。
カスタム データ属性は data- で始まり、ニーズに基づいて名前が付けられます。簡単な例を次に示します:
HTML 要素にカスタム属性を追加し、JavaScript を通じてアクセスします。これまでに試したことがある場合は、タグの検証を無視するのが簡単であることがわかります。HTML5 では、その中で独自の要素を作成して使用することができます。有効な Web ページの属性関数。
HTML5 ファイルの作成:
どれを使用するかをまだ決めていない場合は、以下のコードをコピーできます:
本文にカスタム要素を設定し、ヘッド スクリプト領域の JavaScript 要素を使用してそれらにアクセスします。
要素の作成:
まず、JavaScript の例を識別できるように、いくつかの単純なコンテンツとカスタム属性や ID などの要素を追加します。
ご覧のとおり、カスタム属性は「data-*」という形式になっており、「data-」部分に名前を設定するか、任意の名前を設定します。 HTML5 でカスタム属性を使用します。これが機能する唯一の方法です。したがって、この方法は、Web ページが有効かどうかを確認する場合にのみ使用してください。
もちろん、プロジェクトの詳細によって、カスタム プロパティが役立つかどうか、またその名前の付け方は決まります。この例は、さまざまな製品カテゴリにわたる小売 Web サイトに適用できます。
カスタム属性を使用すると、ページ内で JavaScript コードを使用して、表示機能をアニメーション化するなど、特別な方法で要素を設定できます。標準の HTML 要素がない場合は、カスタム属性を使用することをお勧めします。
テストボタンを追加
次のコードがページに追加されている場合、ページ上で独自の JavaScript 要素を使用してイベントを実行します。
属性の取得:
JavaScript で属性にアクセスする最も一般的な方法は、「getAttributes」を使用することです。これは、最初に実行する必要があるステップでもあります。ページのヘッドスクリプト領域に次の関数を追加します:
ここでは、アラート値を例に追加しました。もちろん、必要に応じてスクリプトに追加することもできます。
データの取得:
DOM "getAttributes" の代わりに要素データセットを使用できます。これは、特にコードが複数の属性を反復処理する特定のケースでは、より効率的である可能性があります。ただし、データセットに対するブラウザのサポートはまだ非常に低いことに留意してください。 , このコードは // 以降のメソッドと同じ処理を実行します。
//var theAttribute = theElement.getAttribute('data-product-category');
var theAttribute = theElement.dataset.productCategory;
データセットの属性名から「data-」を削除します。まだ HTML に含まれています。
カスタム属性名にハイフンが含まれている場合、データ経由でアクセスするとキャメルケース形式で表示されることに注意してください。つまり、(「data-product-category」は「productCategory」になります)。
その他のモジュールと関数
プロパティを取得しましたが、スクリプトは引き続きプロパティを設定および削除できます。以下のコードは、標準の JavaScript モジュールとデータセットを使用してプロパティを設定する方法を示しています。