web-dev-qa-db-ja.com

HTMLタグにカスタム属性を追加できますか？

このようにHTMLタグにカスタム属性を追加できますか？<tag myAttri="myVal" />

htmlhtml5custom-attribute
311
lovespring

！XML文書が引き続き有効になるように、！DOCTYPE宣言（つまりDTD）を許可するように修正できます。

<!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などを使用することもできます。

詳細はこちら：

http://www.w3schools.com/xml/xml_dtd_attributes.asp

179
carillonator

あなたが自由にあなたの要素にカスタム属性を追加することができます。しかし、それはあなたの文書を無効にするでしょう。

HTML 5では、 を先頭にdata- を付けたカスタムデータ属性を使用することができます。

280
Gumbo

いいえ、これは検証を破ります。

HTML 5では、カスタム属性を追加することができます/できます。このようなもの：

<tag data-myAttri="myVal" />
65
user151323

jquerydata()関数を使用すると、任意のデータをdom要素に関連付けることができます。 これが例です 。

32
Draemon

HTML 5の場合：はい： data-attribute を使用します。

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>
11
Davide Andrea

はい、できます。質問自体でそれを実行しました：<html myAttri="myVal"/>。

10
luvieere

JavaScriptからプロパティを設定できます。

document.getElementById("foo").myAttri = "myVal"
7
ewg
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>
6
Jasim Droid

あなたはJavaScriptでネイティブな方法でそれをすることができます：

element.getAttribute('key'); // Getter
element.setAttribute('key', 'value'); // Setter
4
IgniteCoders

これがその例です。

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のコンソールで上記のコードをテストできます。

JS Console, DevTools in Chrome

2
kenorb

data-anyを使用し、私はそれらをたくさん使用します

<aside data-area="asidetop" data-type="responsive" class="top">
0
Erick Boileau

追加することもできますが、その場合はJavaScriptの行も作成する必要があります。

document.createElement('tag');

すべてが適切に機能するようにします。私はIE :)という意味です

0
defau1t

クリーンでドキュメントを有効に保つもう1つの方法は、必要なデータを別のタグに連結することです。それから、あなたがそれを欲しいときに欲しいものを取るために分割を使います。

<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>
0
CAtoOH