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

348

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

<tag myAttri="myVal" />
html custom-attribute Liebesfrühling
quelle
3
stackoverflow.com/questions/432174/…
Tamas Czinege
2
und auch stackoverflow.com/questions/209428/…
Tamas Czinege
Mögliches Duplikat von benutzerdefinierten Attributen - Ja oder Nein?
Ciro Santilli 31 冠状 病 六四 事件 31
Obwohl die Antworten "Ja" lauten, stellen Sie sicher, dass Sie über eine Reihe thematischer Attribute verfügen, die wahrscheinlich nicht mit Plug-Ins verwendet werden. zB: "data-myuniqueattribute". Normalerweise stelle ich irgendetwas nach "data-" mit einer Abkürzung aus zwei Buchstaben voran. zB: "data-yscolumntype". Halten Sie es einzigartig.

Antworten:

189

Sie können Ihre! DOCTYPE-Deklaration (dh 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>
]>

#IMPLIEDbedeutet, dass es sich um ein optionales Attribut handelt oder dass Sie es verwenden #REQUIREDkönnen usw.

Weitere Informationen finden Sie in DTD - Attribute .

Glockenspiel
quelle
2
Setzen Sie all das einfach oben in Ihre HTML-Datei (vorausgesetzt, xhtml 1.0 Transitional ist in Ordnung)
Carillonator
8
Vielleicht fehlt mir etwas, aber wenn Sie diesem Ansatz folgen, wird das]> auf der gerenderten Webseite angezeigt. Passiert mir in Firefox 3.6. Dieses Snippet von alistapart.com/articles/customdtd scheint dieses Verhalten zu überprüfen: "Wenn Sie die Beispieldateien für diesen Artikel herunterladen und die Datei internal.html validieren, können Sie dies selbst sehen. Leider, wenn Sie die Datei in einem Browser anzeigen , das]> wird auf dem Bildschirm angezeigt. An diesem Fehler führt kein Weg vorbei, daher ist dieser Ansatz richtig. "
Mike
3
Einige Dinge, die bei der Darstellung von "]>" hilfreich sein könnten: Speichern Sie die Datei mit der Dateinamenerweiterung .xhtml. Fügen Sie den MIME-Typ in die Datei mit ein <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
4
Das Deklarieren des Attributs ist für das Browserverhalten sinnlos. Sie lesen die DTD nicht. Darüber hinaus können sie die interne Teilmenge (die hier verwendet wird) nicht einmal richtig überspringen, was die "]>" -Messungen erklärt. Die Erklärung wäre nur für die formale Validierung relevant und sollte nicht auf Produktionsseiten verwendet werden.
Jukka K. Korpela
32
Diese Antwort gilt nur für XHTML und HTML 4.01 und älter. Es fehlt völlig, dass Sie jetzt Ihre eigenen Attribute erstellen können, wenn Sie ihnen ein Präfix voranstellen data-.
Brentonstrine
299

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 Datenattributedata- zu verwenden , denen ein Präfix vorangestellt ist .

Gumbo
quelle
169
Denken Sie daran, "ungültig" bedeutet nichts. Die Seite wird 100% der Zeit gut gerendert.
John Farrell
22
Tatsächlich hat "ungültig" sehr reale Auswirkungen. Zum Beispiel kann es Ihr Dokument in das Quirksmode-Rendering versetzen. Verwenden Sie auf jeden Fall den HTML5-Doctype und Sie sind gültig.
Brentonstrine
Hier finden Sie eine gute Tabelle mit verschiedenen Doctypes und entsprechenden Browsermodi : hsivonen.fi/doctype/#handling . HTML5 doctype schaltet alle Browser nach 2001 in den (Voll-) Standardmodus. XHTML Transitional und HTML 4 Transitional (insbesondere ohne DTD) Doctypes nicht :)
Ilya Streltsyn
heiliger süßer Christus, danke. @jfar richtig, aber es verringert die Lesbarkeit.
Nie mehr
Mein Dokument ist sowieso ungültig, weil es mir sagt, dass es |in einem CSS nicht erlaubt ist href, aber das ist, was für Google Fonts
Post Self
73

Nein, dies wird die Validierung unterbrechen.

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

<tag data-myAttri="myVal" />

quelle
8
Aber die Validierung ist mir egal, ich möchte nur, dass über Javascript darauf zugegriffen werden kann.
Lovespring
10
Es wird natürlich funktionieren. Das absichtliche Erstellen ungültiger Dokumente ist jedoch keine so gute Idee.
31
Das Erstellen ungültiger Dokumente ist eine gute Idee. Google erstellt sie, um die Ladezeiten zu verkürzen. Jede Website, die Canvas verwendet, verwendet sie, um eine bessere Benutzererfahrung zu erzielen. Die Verwendung von Javascript-Frameworks zum Abrufen aussagekräftiger Daten aus HTML-Elementen ist mithilfe der benutzerdefinierten Attributtechnik viel einfacher.
John Farrell
3
@jfar: Canvas ist nicht ungültig. Es ist nicht in HTML 4.01; Es ist jedoch ein vollkommen legaler Teil der kommenden HTML5-Spezifikation.
bcat
3
Was meinst du mit "nicht ungültig"? Es ist nicht Teil einer akzeptierten Spezifikation. Wie kann etwas gegen eine nicht existierende Spezifikation gültig sein?
John Farrell
34

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

Draemon
quelle
1
Das ist golden.
Trevor Wood
1
@ TrevorWood und kaputt (der Link).
Akash Agarwal
11

Ja, Sie können, Sie haben es in der Frage selbst getan : <html myAttri="myVal"/>.

luvieere
quelle
2
Hängt davon ab, als was Sie HTML definieren. Ich stelle mir HTML als eine Sprache vor, die auf SGML basiert und bestimmte Elemente und Attribute enthält. XHTML ist eine XML-Variante mit einer Reihe spezifischer Elemente und Attribute, die denen von HTML sehr ähnlich sind. Wenn Sie Ihre eigenen Attribute verwenden, handelt es sich immer noch um SGML von XML, aber meiner Meinung nach nicht mehr um HTML von XHTML.
Douwe Maan
Nehmen Sie es als Ad-hoc-Erweiterung, nicht als Standard im engeren Sinne, sondern als eine Art Implementierung der Anforderung, dass das Parsen nicht fehlschlagen sollte, wenn es benutzerdefinierte Attribute enthält.
luvieere
2
DouweM: Natürlich gibt es immer die HTML-Serialisierung von HTML5, die weder SGML noch XML ist.
bcat
2
Und Sie haben das Dokument dabei beschädigt (ungültig gemacht). Keine gute Praxis.
Glockenspiel
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>
Erweitern Sie das Snippet

Jasim Droid
quelle
2
Bitte fügen Sie Ihrer Antwort eine kurze Erklärung hinzu.
Nikolay Mihaylov
10

Ja, du kannst es schaffen!

Das nächste HTMLTag haben:

<tag key="value"/>

Wir können auf ihre Attribute zugreifen mit JavaScript:

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

Element.setAttribute()Fügen Sie das Attribut in das HTMLTag ein, falls es nicht vorhanden ist. Sie müssen es also nicht im HTMLCode deklarieren, wenn Sie es mit festlegen möchtenJavaScript .

key: kann ein beliebiger Name sein, den Sie für das Attribut wünschen, der jedoch noch nicht für das aktuelle Tag verwendet wird. value: Es ist immer eine Zeichenfolge, die enthält, was Sie benötigen.

IgniteCoders
quelle
7

Sie können Eigenschaften über JavaScript festlegen.

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

Hier ist das Beispiel:

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

Hier ist ein weiteres Beispiel zum Festlegen benutzerdefinierter Attribute für das Body-Tag-Element:

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

Lesen Sie dann das Attribut durch:

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

Sie können den obigen Code in der Konsole in DevTools testen, z

JS-Konsole, DevTools in Chrome

Kenorb
quelle
1

benutze Daten - beliebig, ich benutze sie oft

<aside data-area="asidetop" data-type="responsive" class="top">
Erick Boileau
quelle
Wie erhält man data-*Werte aus JavaScript?
Aaron Franke
0

Ein anderer Ansatz, der sauber ist und das Dokument gültig hält, besteht darin, die gewünschten Daten in ein anderes Tag, z. B. eine ID, zu verketten und dann mit split das zu übernehmen, was Sie möchten, wann Sie es möchten. 

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

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

defau1t
quelle
3
Dies wäre relevant, wenn der Tag-Name dem IE nicht bekannt ist. Hier ist das Problem ein benutzerdefiniertes Attribut, kein benutzerdefiniertes Tag. Das Wort "Tag" <tag ...>hier bedeutet anscheinend nur ein beliebiges HTML-Tag.
Jukka K. Korpela
Macht dies nicht auch XHTML ungültig (es sei denn, es ist ein erkanntes Tag)?
Paul
0

Gut! Sie können tatsächlich eine Reihe von benutzerdefinierten HTML-Attributen erstellen, indem Sie die Datenattribute so verkleiden, wie Sie es tatsächlich möchten.

z.B. 

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

Es funktioniert anscheinend, aber das würde Ihr Dokument ungültig machen. Sie müssen JScript nicht verwenden, um benutzerdefinierte Attribute oder sogar Elemente zu haben, es sei denn, Sie müssen Ihre neuen formulierten (benutzerdefinierten) Attribute genauso behandeln, wie Sie Ihre behandeln Attribut "Daten"

Denken Sie daran, "ungültig" bedeutet nichts. Das Dokument wird jederzeit einwandfrei geladen. und einige Browser würden Ihr Dokument tatsächlich nur durch das Vorhandensein von DOCTYPE validieren ..... Sie wissen tatsächlich, was ich meine.

Abdulbasit
quelle
-8

Sie können so etwas tun, um den gewünschten Wert aus JavaScript anstelle eines Attributs zu extrahieren:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
Frosch
quelle
Attribute existieren aus einem Grund; wie Dinge wie <input type="hidden" value="...">. Berücksichtigen Sie jedoch den Unterschied zwischen dem Datentyp, den Sie in verschiedene Attribute eingeben, und den Daten, die Sie möglicherweise in ein verstecktes Feld eingeben. Ein <span>(ausgerechnet) in einem <a>zu verstecken, um ein Stück Metadaten zu pflegen, ist kein guter Schachzug. Es wäre eigenartig für Ihre Site und sehr stark von JS abhängig (anmutige Erniedrigung, Menschen).
Jay Edwards