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" />




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 .


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- .


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" />

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,



11

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


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>


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.


7

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

document.getElementById("foo").myAttri = "myVal"

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


1

utiliser des données, je les utilise beaucoup

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

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>

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 :)


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.


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

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
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.