381

次のようなカスタム属性をHTMLタグに追加できますか？

<tag myAttri="myVal" />
4

18 に答える 18

332

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

HTML 5では、接頭辞が。のカスタムデータ属性data-を使用する機会があります。

于 2009-11-14T19:14:50.673 に答える
196

！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-属性を参照してください。

于 2009-11-14T22:15:21.963 に答える
82

いいえ、これにより検証が失敗します。

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

<tag data-myAttri="myVal" />
于 2009-11-14T19:08:16.910 に答える
33

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

于 2009-11-14T19:23:30.093 に答える
25

HTML5の場合：はい：data-属性を使用します。

 <ul>
  <li data-animal-type="bird">Owl</li>
  <li data-animal-type="fish">Salmon</li>
  <li data-animal-type="spider">Tarantula</li>
</ul>
于 2017-04-01T20:11:40.727 に答える
19

はい、できます！

次のHTMLタグを持つ：

<tag key="value"/>

次のコマンドでそれらの属性にアクセスできますJavaScript。

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

Element.setAttribute()存在しない場合は、属性をHTMLタグに入れます。HTMLしたがって、で設定する場合は、コードで宣言する必要はありませんJavaScript。

key：現在のタグにはまだ使用されていませんが、属性に任意の名前を付けることができます。 value：それは常にあなたが必要とするものを含む文字列です。

于 2014-08-25T12:55:29.400 に答える
11

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

于 2009-11-14T19:11:40.147 に答える
10 

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>

于 2017-10-18T22:39:55.210 に答える
6

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

document.getElementById("foo").myAttri = "myVal"
于 2009-11-14T22:46:14.187 に答える
4

次に例を示します。

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コンソール、ChromeのDevTools

于 2017-08-03T12:13:38.073 に答える
4

データを使用する-いずれか、私はそれらを頻繁に使用します

<aside data-area="asidetop" data-type="responsive" class="top">
于 2019-08-30T06:12:07.873 に答える
3

はい、data-*属性を使用できます。このdata-*属性は、ページまたはアプリケーション専用のカスタムデータを保存するために使用されます。

<ul>
    <li data-pageNumber="1"> 1 </li>
    <li data-pageNumber="2"> 2 </li>  
    <li data-pageNumber="3"> 3 </li>  
</ul
于 2020-08-20T09:36:55.253 に答える
2

良い！実際に必要なデータ属性を偽装することで、実際に一連のカスタムHTML属性を作成できます。

例えば。

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

明らかに機能しますが、ドキュメントが無効になります。必要がない限り、カスタム属性や要素を含めるためにJScriptを使用する必要はありません。新しい定式化された（カスタム）属性を、同じように扱う必要があります。 「データ」属性

「無効」は何も意味しないことを忘れないでください。ドキュメントは常に正常に読み込まれます。一部のブラウザは、実際にはDOCTYPEの存在によってのみドキュメントを検証します.....、あなたは実際に私が何を意味するかを知っています。

于 2020-05-20T09:43:35.957 に答える
1

クリーンでドキュメントを有効に保つ別のアプローチは、必要なデータを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>
于 2016-12-13T16:36:03.037 に答える
1

カスタムタグの便利な使い方が思い浮かびます"init"。document.onLoad()一度に評価され、タグの値を提供するJavaScript式を含めます。

<p>&lt;p&gt;The UTC date is &lt;span init="new Date().toUTCString()"&gt;?&lt;/span&gt;.&lt;p&gt;</p>

ボイラープレートJavaScriptコードの中には、DOM内のすべてのタグをスキャンしてdocument.onload()、init属性を探し、それらに含まれる式を評価し、それらを含むタグのinnerHTMLに割り当てるものがあります。これにより、HTMLにJSP、PHPなどの機能がいくらか与えられます。現在、HTMLマークアップとそれを照らすJavaScriptコードを分割する必要があります。バグは分割コードが大好きです。

于 2020-10-27T08:01:55.360 に答える
0

カスタム要素では、プレフィックスなしでカスタム属性を追加するのが一般的です。data-

HTML標準の例を次に示します。カスタム要素（country属性に注意）：

<flag-icon country="nl"></flag-icon>

MDN Web Docsの別の例：カスタム要素の使用（lおよびc属性に注意）：

<custom-square l="100" c="red"></custom-square>
于 2022-02-28T19:09:19.797 に答える
-1

追加することはできますが、JavaScriptコードも1行書く必要があります。

document.createElement('tag');

すべてが所定の位置にあることを確認します。私はInternetExplorerを意味します:)

于 2012-11-19T09:27:03.727 に答える
-9

次のようにして、属性の代わりにJavaScriptから必要な値を抽出できます。

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
于 2015-06-01T06:05:10.097 に答える