HTML5 カスタム属性の用途は何ですか?-フロントエンドQ&A-php.cn

HTML5 カスタム属性の用途は何ですか?

青灯夜游

リリース： 2022-08-01 17:02:43

オリジナル

1946 人が閲覧しました

html5 カスタム属性「data-*」は、プライベートページの背後に適用されるカスタムデータを保存するために使用されます。カスタムデータにより、ページにより良いインタラクティブエクスペリエンスが提供されます (Ajax を使用したり、サーバーにアクセスしたりする必要はありません)。 data) の場合、構文は「」です。「data-*」属性は 2 つの部分で構成されます: 1. 属性名には大文字を含めないでください。 . -" の後には少なくとも 1 文字が続く必要があります。 2. 属性値。任意の文字列を使用できます。

HTML5 カスタム属性の用途は何ですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

#html5 カスタム属性data-*<span style="font-size: 18px;"></span>

data-* この属性は、プライベートページの背後に適用されるカスタムデータを保存するために使用されます。これは HTML5 の新しい属性です。

<element data-*="somevalue">

ログイン後にコピー

somevalue: 属性値 (文字列) を指定します。

data-* 属性はすべての HTML で使用できます要素にデータを埋め込みます。

カスタマイズされたデータにより、ページのインタラクティブなエクスペリエンスが向上します (Ajax を使用したり、サーバー上のデータをクエリしたりする必要はありません)。

data-* 属性は次の 2 つの部分で構成されます。

属性名には大文字を含めることはできません。 data- の後に少なくとも 1 文字。
属性値。属性値には任意の文字列を指定できます。

注: カスタム属性プレフィックス「data-」はクライアントによって無視されます。

データセットを使用して、データ属性によって構築されたオブジェクトを取得できます。このメソッドは現在、Chrome や Opera などの一部のブラウザにのみ実装されています。他のブラウザが属性値を取得する必要がある場合は、getAttribute を使用する必要があります。そして操作するsetAttribute。

タグ内のプレフィックスとして「data-」を使用してカスタム属性を定義している限り、それを使用してデータを保存できます。

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

ログイン後にコピー

このデータ属性は、ブラウザがコンテンツの after 疑似クラスと attr 属性をサポートしている場合、CSS にも適用できます (IE の以前のバージョンではサポートされていません):

<div id="myDiv" data-attribute="属性值">data属性应用于CSS中</div>

ログイン後にコピー

#myDiv{
  position: ralative;
}
 
#myDiv:hover:after{
  position: absolute;
  top: 0px;
  left: 0px;
  content: attr(data-attribute);
  color: red;
}

ログイン後にコピー

データ属性の値を取得するにはどうすればよいですか?

<div id="myDiv" data-attribute="value">在标签里设置H5新增的自定义属性</div>

ログイン後にコピー

1. getAttribute を使用して

var myDiv = document.getElementById("myDiv");
var theValue = myDiv.getAttribute("user-defined-attribute");

ログイン後にコピー

2. Html5 カスタム属性オブジェクトデータセットを使用して

var myDiv = document.getElementById("myDiv");
 
var theValue = myDiv.dataset.attribute;

ログイン後にコピー

を取得します注: 使用する場合、名前にハイフンが含まれていますの場合は、キャメルケースで名前を付ける必要があります。つまり、application 要素のスタイルオブジェクト

dom.style.borderColor と同様に、大文字と小文字の組み合わせで名前を記述する必要があります。たとえば、データ属性は data-other-attribute であり、対応する値を取得したい場合は、myp.dataset.otherAttribute

If HTML を使用できます。要素で複数のカスタム属性を定義します。取得方法は?

<div id="myDiv" data-attribute1="value" data-attribute2="value2" data-attribute3="value3">在标签里设置多个自定义属性</div>

ログイン後にコピー

1. ループトラバーサルを使用します

 var myDiv = document.getElementById("myDiv");
var attrs = myDiv.attributes,
var expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == &#39;data-&#39;) {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}

ログイン後にコピー

dataset 属性

var expense = document.getElementById(&#39;myDiv&#39;).dataset;

ログイン後にコピー

を使用します注:

dataset とこれは一般的な意味での JavaScript オブジェクトではありませんが、DOMStringMap オブジェクト、DOMStringMap は、複数の名前と値のペアを含む HTML5 の新しい対話型変数です。

1 )、すべてのカスタム属性値を配列に詰め込みます

var chartInput = [];
 
for (var item in expense) {
  chartInput.push(expense[item]);
}

ログイン後にコピー

2)、

data 属性を削除します

delete myDiv.dataset.attribute;

ログイン後にコピー

3、data 属性を追加します

myDiv.dataset.attribute4 = &#39;value4&#39;;

ログイン後にコピー

データセットの互換性処理

ブラウザがデータセットをサポートしていない場合は、互換性処理を行う必要があります:

if(myDiv.dataset) {
  myDiv.dataset.attribute = "valueXX"; // 设置自定义属性
  var theValue = myDiv.dataset.attribute; // 获取自定义属性
} else {
  myDiv.setAttribute("data-attribute", "valueXX"); // 设置自定义属性
  var theValue = myDiv.getAttribute("data-attribute"); // 获取自定义属性
}

ログイン後にコピー

結論:

dataset を使用して data を操作すると、getAttribute を使用するよりもわずかに遅くなりますが、dataset を使用することはできません。コードのパフォーマンスが向上しますが、コードが簡潔な場合、コードの読みやすさと保守性を向上させるのに非常に役立ちます。

[推奨コース:

HTML5 ビデオチュートリアル、Web フロントエンド ]

以上がHTML5 カスタム属性の用途は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。