Puis-je ajouter un attribut personnalisé à une balise HTML comme le suivant?
<tag myAttri="myVal" />
Puis-je ajouter un attribut personnalisé à une balise HTML comme le suivant?
<tag myAttri="myVal" />
Réponses:
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>
]>
#IMPLIED
signifie qu'il s'agit d'un attribut facultatif, ou que vous pouvez utiliser #REQUIRED
, etc.
Plus d'informations sont dans DTD - Attributs .
<meta http-equiv="content-type" content="application/xhtml+xml" />
.
data-
.
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-
.
|
n'est pas autorisé dans un css href
, mais c'est ce qui est nécessaire pour Google Fonts
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 data()
fonction jQuery vous permet d'associer des données arbitraires à des éléments DOM. Voici un exemple .
En HTML5: oui: utilisez l' attribut data- .
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
Oui, vous pouvez, vous l' avez fait dans la question elle - même: <html myAttri="myVal"/>
.
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>
Oui, vous pouvez le faire!
Avoir le HTML
tag 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 HTML
balise s'il n'existe pas. Ainsi, vous n'avez pas besoin de le déclarer dans le HTML
code 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.
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
utiliser des données, je les utilise beaucoup
<aside data-area="asidetop" data-type="responsive" class="top">
data-*
valeurs de JavaScript?
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>
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 :)
<tag ...>
ici signifie apparemment n'importe quelle balise HTML.
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.
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>
<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).