web-dev-qa-db-fra.com

Puis-je ajouter un attribut personnalisé à une balise HTML?

Puis-je ajouter un attribut personnalisé à une balise HTML comme suit?

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

Vous pouvez modifier votre déclaration! DOCTYPE (c'est-à-dire une DTD) pour l'autoriser, de sorte que le document [XML] soit toujours valide:

<!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 signifie que c'est un attribut facultatif, ou vous pouvez utiliser #REQUIRED, etc.

Plus d'informations sont dans DTD - Attributes.

183
carillonator

Vous pouvez ajouter des attributs personnalisés à vos éléments à volonté. Mais cela rendra votre document invalide.

En HTML 5, vous aurez la possibilité d'utiliser attributs de données personnalisés précédés du préfixe data- .

284
Gumbo

Non, cela va casser la validation.

En HTML 5, vous pouvez/pourrez ajouter des attributs personnalisés. Quelque chose comme ça:

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

La fonction jQuery data() vous permet d'associer des données arbitraires à des éléments DOM. Voici un exemple .

33
Draemon

En HTML5: oui: utilisez le attribut de données .

 <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

Oui, vous pouvez, vous l'avez fait dans la question elle-même: <html myAttri="myVal"/>.

11
luvieere

Vous pouvez définir des propriétés à partir de 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>
7
Jasim Droid

Oui, vous pouvez le faire!

Avoir la prochaine balise HTML:

<tag key="value"/>

Nous pouvons accéder à leurs attributs avec JavaScript:

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

Element.setAttribute() place l'attribut dans la balise HTML s'il n'existe pas. Donc, vous n'avez pas besoin de le déclarer dans le code HTML si vous voulez le définir avec JavaScript.

key: il peut s'agir du nom de votre choix pour l'attribut, alors qu'il n'est pas déjà utilisé pour la balise actuelle. value: c'est toujours une chaîne contenant ce dont vous avez besoin.

6
IgniteCoders

Voici l'exemple:

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

Voici un autre exemple pour définir des attributs personnalisés dans un élément de balise body:

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

Puis lisez l'attribut par:

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

Vous pouvez tester le code ci-dessus dans la console de DevTools, par exemple.

JS Console, DevTools in Chrome

3
kenorb

utiliser des données-tout, je les utilise beaucoup

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

Vous pouvez ajouter, mais vous devez ensuite écrire une ligne de code JavaScript aussi,

document.createElement('tag');

pour s'assurer que tout tombe en place. Je veux dire Internet Explorer :)

0
defau1t

Une autre approche, propre et qui maintiendra le document valide, consiste à concaténer les données souhaitées dans une autre balise, par exemple. id, puis utilisez split pour prendre ce que vous voulez quand vous le voulez.

<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