次のようにHTMLタグにカスタム属性を追加できますか？
<tag myAttri="myVal" />回答:
！DOCTYPE宣言（DTDなど）を修正して、[XML]ドキュメントが引き続き有効になるようにすることができます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
[
<!ATTLIST tag myAttri CDATA #IMPLIED>
]>#IMPLIEDはオプションの属性であることを意味します。または#REQUIRED、などを使用できます。
詳細については、DTD-属性を参照してください。
<meta http-equiv="content-type" content="application/xhtml+xml" />。
data-。
要素にカスタム属性を自由に追加できます。しかし、それはあなたの文書を無効にします。
HTML 5では、接頭辞がのカスタムデータ属性data-を使用する機会があります。
|CSSで許可されていませんhrefが、それはGoogleのフォントのために必要だものだ
いいえ、これは検証を壊します。
HTML 5では、カスタム属性を追加できます/追加できます。このようなもの：
<tag data-myAttri="myVal" />jQuery data()関数を使用すると、任意のデータをDOM要素に関連付けることができます。ここに例があります。
はい、できます<html myAttri="myVal"/>。質問自体で行いました。
var demo = document.getElementById("demo")
console.log(demo.dataset.myvar)
// or
alert(demo.dataset.myvar)
//this will show in console the value of myvar<div id="demo" data-myvar="foo">anything</div>はい、できます！
次のHTMLタグを持つ：
<tag key="value"/>これらの属性にはJavaScript次の方法でアクセスできます。
element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // SetterElement.setAttribute()属性がHTML存在しない場合はタグに入れます。したがって、次のHTMLように設定する場合は、コードで宣言する必要はありません。JavaScript。
key：現在のタグではまだ使用されていませんが、属性に任意の名前を付けることができます。
value：常に必要なものを含む文字列です。
次に例を示します。
document.getElementsByTagName("html").foo="bar"カスタム属性をbodyタグ要素に設定する別の例を次に示します。
document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";次に、次の方法で属性を読み取ります。
attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2上記のコードは、DevToolsのコンソールでテストできます。
クリーンでドキュメントを有効に保つ別のアプローチは、必要なデータを別のタグ（idなど）に連結し、splitを使用して必要なときに必要なデータを取得することです。
<html>
<script>
function demonstrate(){
var x = document.getElementById("example data").querySelectorAll("input");
console.log(x);
for(i=0;i<x.length;i++){
var line_to_illustrate = x[i].id + ":" + document.getElementById ( x[i].id ).value;
//concatenated values
console.log("this is all together: " + line_to_illustrate);
//split values
var split_line_to_illustrate = line_to_illustrate.split(":");
for(j=0;j<split_line_to_illustrate.length;j++){
console.log("item " + j+ " is: " + split_line_to_illustrate[j]);
}
}
}
</script>
<body>
<div id="example data">
<!-- consider the id values representing a 'from-to' relationship -->
<input id="1:2" type="number" name="quantity" min="0" max="9" value="2">
<input id="1:4" type="number" name="quantity" min="0" max="9" value="1">
<input id="3:6" type="number" name="quantity" min="0" max="9" value="5">
</div>
<input type="button" name="" id="?" value="show me" onclick="demonstrate()"/>
</body>
</html>追加できますが、その場合はJavaScriptコードの行も記述する必要があります。
document.createElement('tag');すべてが適切に配置されるようにします。私はInternet Explorerを意味します:)
<tag ...>ここでの「タグ」という言葉は、明らかに任意のHTMLタグを意味します。
上手！実際に必要なデータ属性を偽装することで、カスタムHTML属性の束を実際に作成できます。
例えば。
[attribute='value']{
color:red;
}<span attribute="value" >hello world</span>それは明らかに機能しますが、それはドキュメントを無効にします。必要がない限り、JScriptを使用してカスタム属性または要素さえも持つ必要はありません。新しい処方された（カスタム）属性を、 「データ」属性
覚えている「無効なことは」平均何もしません。ドキュメントは常に正常に読み込まれます。一部のブラウザは、DOCTYPEの存在によってのみ実際にドキュメントを検証します。
次のようにして、属性の代わりにJavaScriptから必要な値を抽出できます。
<a href='#' class='click'>
<span style='display:none;'>value for JavaScript</span>some text
</a><input type="hidden" value="...">。ただし、非表示フィールドに入力するデータとは対照的に、さまざまな属性に入力するデータの種類の違いを考慮してください。メタデータの一部を維持<span>する<a>ために（すべてのものの）を非表示にすることは適切な動きではありません。それはあなたのサイトに固有であり、JS（優雅な低下、人々）に大きく依存します。