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

348

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

<tag myAttri="myVal" />
html custom-attribute Lovespring
la source
3
stackoverflow.com/questions/432174/…
Tamas Czinege
2
et aussi stackoverflow.com/questions/209428/…
Tamas Czinege
doublon possible d' attributs personnalisés - Oui ou non?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Bien que les réponses disent «oui», assurez-vous que vous disposez d'un ensemble d'attributs thématiques qui ne sont probablement pas utilisés avec les plug-ins. par exemple: "data-myuniqueattribute". Je préfixe généralement n'importe quoi après "data-" avec un type d'abréviation à deux lettres. par exemple: "data-yscolumntype". Gardez-le unique.

Réponses:

189

Vous pouvez modifier votre déclaration! DOCTYPE (c'est-à-dire DTD) pour l'autoriser, afin 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>
]>

#IMPLIEDsignifie qu'il s'agit d'un attribut facultatif, ou que vous pouvez utiliser #REQUIRED, etc.

Plus d'informations sont dans DTD - Attributs .

carillonateur
la source
2
il suffit de mettre tout cela en haut de votre fichier html (en supposant que le transitionnel xhtml 1.0 est correct)
carillonator
8
Il me manque peut-être quelque chose, mais si vous suivez cette approche, le]> apparaît dans la page Web rendue. Ça m'arrive sur Firefox 3.6. Cet extrait de alistapart.com/articles/customdtd semble vérifier ce comportement: "Si vous téléchargez les exemples de fichiers pour cet article et validez le fichier internal.html, vous pouvez le constater par vous-même. Malheureusement, lorsque vous affichez le fichier dans un navigateur , le]> apparaît à l'écran. Il n'y a aucun moyen de contourner ce bogue, donc cette approche est tout de suite sortie. "
Mike
3
Quelques éléments qui pourraient aider à l'apparence de "]>": Enregistrez le fichier avec une extension de nom de fichier .xhtml. Incluez le type MIME dans le fichier avec <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
4
La déclaration de l'attribut est inutile en ce qui concerne le comportement du navigateur. Ils ne lisent pas la DTD. De plus, ils ne peuvent même pas ignorer correctement le sous-ensemble interne (qui est utilisé ici), ce qui explique les mesures «]>». La déclaration ne concernerait que la validation formelle et ne devrait pas être utilisée sur les pages de production.
Jukka K. Korpela
32
Cette réponse s'applique uniquement à XHTML et HTML 4.01 et versions antérieures. Il manque complètement que vous puissiez maintenant créer vos propres attributs si vous les préfixez avec data-.
brentonstrine
299

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 des attributs de données personnalisés avec un préfixedata- .

Gombo
la source
169
N'oubliez pas que "invalide" ne veut rien dire. La page restituera bien 100% du temps.
John Farrell
22
En fait, "invalide" a des implications très réelles. Par exemple, il peut mettre votre document en rendu quirksmode. En tout cas, utilisez le doctype HTML5 et vous serez valide.
brentonstrine
Il existe un bon tableau des différents doctypes et des modes de navigation correspondants ici: hsivonen.fi/doctype/#handling . Le doctype HTML5 fait passer tous les navigateurs post-2001 en mode (complet) Standards. Les doctypes XHTML Transitional et HTML 4 Transitional (en particulier sans DTD) ne le font pas :)
Ilya Streltsyn
saint doux christ, merci. @jfar à droite mais cela diminue la lisibilité.
Nevermore
Mon document est de toute façon invalide, car il me dit qu'il |n'est pas autorisé dans un css href, mais c'est ce qui est nécessaire pour Google Fonts
Post Self
73

Non, cela interrompra la validation.

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

<tag data-myAttri="myVal" />

la source
8
mais, peu m'importe la validation, je veux juste qu'elle soit accessible par javascript.
lovespring
10
Cela fonctionnera bien sûr. Mais créer délibérément des documents invalides n'est pas une si bonne idée.
31
La création de documents invalides est une excellente idée. Google les crée pour réduire les temps de chargement, chaque site utilisant canvas les utilise pour créer une meilleure expérience utilisateur, et l'utilisation de frameworks javascript pour extraire des données significatives des éléments html est beaucoup plus facile en utilisant la technique d'attribut personnalisé.
John Farrell
3
@jfar: Canvas n'est pas invalide. Ce n'est pas en HTML 4.01; cependant, c'est une partie parfaitement légale de la prochaine spécification HTML5.
bcat
3
Que voulez-vous dire "non invalide"? Cela ne fait partie d'aucune spécification acceptée. Comment quelque chose peut-il être valable par rapport à une spécification qui n'existe pas?
John Farrell,
34

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

Draemon
la source
1
C'est doré.
Trevor Wood
1
@TrevorWood et cassé (le lien).
Akash Agarwal
11

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

luvieere
la source
2
Dépend de ce que vous définissez HTML. Je pense au HTML comme un langage basé sur SGML, avec un ensemble spécifique d'éléments et d'attributs. XHTML est une variante de XML, avec un ensemble spécifique d'éléments et d'attributs qui ressemble beaucoup à HTML. Lorsque vous utilisez vos propres attributs, il s'agit toujours de SGML de XML, mais plus de HTML de XHTML à mon avis.
Douwe Maan
Considérez-le comme une extension ad hoc, pas une norme au sens strict, mais une sorte d'implémentation de l'exigence selon laquelle il ne doit pas échouer à l'analyse s'il contient des attributs personnalisés.
luvieere
2
DouweM: Bien sûr, il y a toujours la sérialisation HTML de HTML5, qui n'est ni SGML ni XML.
bcat
2
Et vous avez cassé (invalidé) le document au cours du processus. Pas une bonne pratique.
carillonateur
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>
Développer l'extrait

Jasim Droid
la source
2
Veuillez ajouter une brève explication à votre réponse.
Nikolay Mihaylov
10

Oui, vous pouvez le faire!

Avoir le HTMLtag suivant :

<tag key="value"/>

Nous pouvons accéder à leurs attributs avec JavaScript:

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

Element.setAttribute()mettre l'attribut dans la HTMLbalise s'il n'existe pas. Ainsi, vous n'avez pas besoin de le déclarer dans le HTMLcode si vous voulez le définir avec JavaScript.

key: pourrait être n'importe quel nom que vous désirez 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.

IgniteCoders
la source
7

Vous pouvez définir des propriétés à partir de JavaScript.

document.getElementById("foo").myAttri = "myVal"
ewg
la source
4

Voici l'exemple:

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

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

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

Lisez ensuite 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 dans DevTools, par exemple

Console JS, DevTools dans Chrome

kenorb
la source
1

utiliser des données, je les utilise beaucoup

<aside data-area="asidetop" data-type="responsive" class="top">
Erick Boileau
la source
Comment obtenez-vous les data-*valeurs de JavaScript?
Aaron Franke
0

Une autre approche, qui est propre et gardera le document valide, consiste à concaténer les données que vous voulez dans une autre balise, par exemple id, puis à utiliser 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>
CAtoOH
la source
0

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

document.createElement('tag');

pour vous assurer que tout est bien en place. Je veux dire Internet Explorer :)

defau1t
la source
3
Cela serait pertinent si le nom de la balise n'est pas connu de IE. Ici, le problème est un attribut personnalisé, pas une balise personnalisée; le mot «tag» <tag ...>ici signifie apparemment n'importe quelle balise HTML.
Jukka K. Korpela
Cela n'invalide-t-il pas également XHTML (sauf s'il s'agit d'une balise reconnue)?
Paul
0

bien! vous pouvez réellement créer un tas d'attributs HTML personnalisés en déguisant les attributs de données en ce que vous voulez réellement.

par exemple. 

[attribute='value']{
color:red;
}
<span attribute="value" >hello world</span>

Cela fonctionne apparemment mais cela invaliderait votre document, il n'est pas nécessaire d'utiliser JScript pour que vous ayez des attributs personnalisés ou même des éléments, sauf si vous le devez, il vous suffit de traiter vos nouveaux attributs formulés (personnalisés) de la même manière que vous traitez votre attribut "data"

N'oubliez pas que "invalide" ne veut rien dire. Le document se chargera parfaitement à tout moment. et certains navigateurs valideraient votre document uniquement par la présence de DOCTYPE ....., vous savez ce que je veux dire.

Abdulbasit
la source
-8

Vous pouvez faire quelque chose comme ceci pour extraire la valeur que vous voulez de JavaScript au lieu d'un attribut:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
Grenouille
la source
Les attributs existent pour une raison; comme le font des choses comme <input type="hidden" value="...">. Considérez, cependant, la différence entre le type de données que vous mettez dans divers attributs par rapport aux données que vous pourriez mettre dans un champ caché. Cacher un <span>(de toutes choses) dans un <a>but de maintenir un morceau de métadonnées n'est pas une bonne chose. Il serait propre à votre site et très dépendant de JS (dégradation gracieuse, personnes).
Jay Edwards