wake-up-neo.com

Kann ich einem HTML-Tag ein benutzerdefiniertes Attribut hinzufügen?

Kann ich einem HTML-Tag wie folgt ein benutzerdefiniertes Attribut hinzufügen?

<tag myAttri="myVal" />
htmlcustom-attribute
317
lovespring

Sie können Ihre! DOCTYPE-Deklaration (d. H. DTD) so ändern, dass das [XML] -Dokument weiterhin gültig ist:

<!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 bedeutet, dass es ein optionales Attribut ist, oder Sie könnten #REQUIRED, usw.

Weitere Informationen finden Sie in DTD - Attribute.

183
carillonator

Sie können Ihren Elementen nach Belieben benutzerdefinierte Attribute hinzufügen. Dadurch wird Ihr Dokument jedoch ungültig.

In HTML 5 haben Sie die Möglichkeit, benutzerdefinierte Datenattribute mit dem Präfix data- .

284
Gumbo

Nein, dies wird die Validierung unterbrechen.

In HTML 5 können/können Sie benutzerdefinierte Attribute hinzufügen. Etwas wie das:

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

Mit der Funktion jQuery data() können Sie DOM-Elementen beliebige Daten zuordnen. Hier ist ein Beispiel .

33
Draemon

In HTML5: Ja: Verwenden Sie das Datenattribut .

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

Ja, du kannst, du hast es in der Frage selbst getan: <html myAttri="myVal"/>.

11
luvieere

Sie können Eigenschaften in JavaScript festlegen.

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>
7
Jasim Droid

Ja, das kannst du!

Das nächste HTML -Tag haben:

<tag key="value"/>

Wir können mit JavaScript auf ihre Attribute zugreifen:

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

Element.setAttribute() füge das Attribut in das Tag HTML ein, falls es nicht existiert. Sie müssen es also nicht im Code HTML deklarieren, wenn Sie es mit JavaScript festlegen möchten.

key: kann ein beliebiger Name für das Attribut sein, wird jedoch nicht bereits für das aktuelle Tag verwendet. value: Es ist immer eine Zeichenkette, die enthält, was Sie brauchen.

6
IgniteCoders

Hier ist das Beispiel:

document.getElementsByTagName("html").foo="bar"

Hier ist ein weiteres Beispiel, wie benutzerdefinierte Attribute in ein Body-Tag-Element gesetzt werden:

document.getElementsByTagName('body')[0].dataset.attr1 = "foo";
document.getElementsByTagName('body')[0].dataset.attr2 = "bar";

Dann lesen Sie das Attribut durch:

attr1 = document.getElementsByTagName('body')[0].dataset.attr1
attr2 = document.getElementsByTagName('body')[0].dataset.attr2

Sie können den obigen Code in Console in DevTools testen, z.

JS Console, DevTools in Chrome

3
kenorb

benutze Daten - ich benutze sie oft

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

Sie können hinzufügen, aber dann müssen Sie auch eine Zeile JavaScript-Code schreiben,

document.createElement('tag');

um sicherzustellen, dass alles passt. Ich meine Internet Explorer :)

0
defau1t

Ein anderer Ansatz, der sauber ist und das Dokument gültig hält, besteht darin, die gewünschten Daten in einem anderen Tag zu verketten, z. id, dann verwenden Sie split, um zu nehmen, was Sie wollen, wann Sie es wollen.

<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