"; "data-*" 属性は 2 つの部分で構成されます: 1. 属性名には大文字を含めることはできません。また、少なくとも 1 文字が必要です。 "data-" ;2. 属性値の後、値は任意の文字列にすることができます。"/> "; "data-*" 属性は 2 つの部分で構成されます: 1. 属性名には大文字を含めることはできません。また、少なくとも 1 文字が必要です。 "data-" ;2. 属性値の後、値は任意の文字列にすることができます。">
ホームページ > 記事 > ウェブフロントエンド > HTML5 カスタム属性の用途は何ですか?
html5 カスタム属性「data-*」は、プライベート ページの背後に適用されるカスタム データを保存するために使用されます。カスタム データにより、ページにより良いインタラクティブ エクスペリエンスが提供されます (Ajax を使用したり、サーバーにアクセスしたりする必要はありません)。 data) の場合、構文は「89754f29c91ba8f490f2b4cf191eb9c4」です。「data-*」属性は 2 つの部分で構成されます: 1. 属性名には大文字を含めないでください。 . -" の後には少なくとも 1 文字が続く必要があります。 2. 属性値。任意の文字列を使用できます。
このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。
#html5 カスタム属性data-*<span style="font-size: 18px;"></span>
data-* この属性は、プライベート ページの背後に適用されるカスタム データを保存するために使用されます。これは HTML5 の新しい属性です。
<element data-*="somevalue">
data-* 属性はすべての HTML で使用できます要素にデータを埋め込みます。
data-* 属性は次の 2 つの部分で構成されます。
43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba68このデータ属性は、ブラウザがコンテンツの after 疑似クラスと attr 属性をサポートしている場合、CSS にも適用できます (IE の以前のバージョンではサポートされていません):
737b187744250f324eeb34e9a767a074data属性应用于CSS中16b28748ea4df4d9c2150843fecfba68
#myDiv{ position: ralative; } #myDiv:hover:after{ position: absolute; top: 0px; left: 0px; content: attr(data-attribute); color: red; }
データ属性の値を取得するにはどうすればよいですか?
43d5f872dac78da2f00d1b2554e67c92在标签里设置H5新增的自定义属性16b28748ea4df4d9c2150843fecfba681. 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 を使用できます。要素で複数のカスタム属性を定義します。取得方法は?
89d9a64ee0d1f224431c05a17eee736b在标签里设置多个自定义属性16b28748ea4df4d9c2150843fecfba681. ループ トラバーサルを使用します
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) == 'data-') { expense[attrs[i].name.substring(5)] = attrs[i].value; } }2.
dataset 属性
var expense = document.getElementById('myDiv').dataset;を使用します 注:
dataset とこれは一般的な意味での JavaScript オブジェクトではありませんが、
DOMStringMap オブジェクト、
DOMStringMap は、複数の名前と値のペアを含む HTML5 の新しい対話型変数です。
var chartInput = []; for (var item in expense) { chartInput.push(expense[item]); }2)、
data 属性を削除します
delete myDiv.dataset.attribute;3、data 属性を追加します
myDiv.dataset.attribute4 = 'value4';
データセットの互換性処理
ブラウザがデータセットをサポートしていない場合は、互換性処理を行う必要があります: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 サイトの他の関連記事を参照してください。