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

276

Kann ich ein benutzerdefiniertes Attribut zum HTML-Tag wie folgt hinzufügen: <tag myAttri="myVal" />Kann ich dem HTML-Tag ein benutzerdefiniertes Attribut hinzufügen?

Quelle

2009-11-14 lovespring

http://stackoverflow.com/questions/432174/how-to-store-arbitrary-data-for-some-html-tags –

und auch http : //stackoverflow.com/questions/209428/non-standard-attributes-on-html-tags-good-thing-badthing-your-thoughts –

danke, ich werde einen Blick darauf werfen. – lovespring

171

Sie können Ihre DOCTYPE-Deklaration (dh DTD) ändern, um es zu ermöglichen, so dass die [XML] Dokument noch 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> 
]>

#IMPLIED bedeutet es eine optionale Attribué ist, oder könnten Sie verwenden #REQUIRED usw.

weitere Informationen hier:

http://www.w3schools.com/xml/xml_dtd_attributes.asp

Quelle

2009-11-14 22:15:21 carillonator

Muss ich eine DTD-Datei erstellen oder einfach ATTLIST inline in HTML-Datei hinzufügen? – lovespring

setzen Sie einfach alles oben auf Ihrer HTML-Datei (vorausgesetzt, XHTML 1.0 Übergang ist in Ordnung) – carillonator

Vielleicht fehlt mir etwas, aber wenn Sie diesen Ansatz folgen, wird das> auf der gerenderten Webseite angezeigt. Das passiert mir in Firefox 3.6. Dieses Snippet von http://www.alistapart.com/articles/customdtd/ scheint dieses Verhalten zu überprüfen: "Wenn Sie die Beispieldateien für diesen Artikel herunterladen und die Datei internal.html überprüfen, können Sie dies selbst sehen. Leider Wenn Sie die Datei in einem Browser anzeigen, wird auf dem Bildschirm>]> angezeigt. Um diesen Fehler herum gibt es keinen Weg, daher ist dieser Ansatz richtig. " – Mike

Nein, dies wird die Validierung zu brechen.

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

<tag data-myAttri="myVal" />

Quelle

2009-11-14 19:08:16

aber ich interessiere mich nicht Validierung, ich will nur es könnte durch Javascript zugegriffen werden. – lovespring

Es wird natürlich funktionieren. Das Erstellen ungültiger Dokumente ist jedoch keine so gute Idee. –

Nun, technisch ist es nicht mehr HTML. Genauso könnten Sie eine Last von Binärdateien in der Mitte eines Tags hinzufügen - aber es wird kein HTML sein. – Draemon

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

Quelle

2009-11-14 19:11:40 luvieere

Hängt davon ab, wie Sie HTML als definieren. Ich denke an HTML als eine Sprache, die auf SGML basiert, mit einer bestimmten Menge von Elementen und Attributen. XHTML ist eine Variante von XML mit einer bestimmten Menge von Elementen und Attributen, die HTML sehr ähnlich ist. Wenn Sie Ihre eigenen Attribute verwenden, ist es immer noch SGML von XML, aber nicht mehr HTML von XHTML meiner Meinung nach. –

Nehmen Sie es als eine Ad-hoc-Erweiterung, kein Standard im strengen Sinne, aber eine Art der Implementierung der Anforderung, dass es nicht Parsen fehlschlagen sollte, wenn es benutzerdefinierte Attribute enthält. – luvieere

DouweM: Natürlich gibt es immer die HTML-Serialisierung von HTML5, die weder SGML noch XML ist. – bcat

245

Sie können nach Belieben benutzerdefinierte Attribute zu Ihren Elementen hinzufügen. Aber das wird Ihr Dokument ungültig machen.

In HTML 5 haben Sie die Möglichkeit custom data attributes prefixed with data- zu verwenden.

Quelle

2009-11-14 19:14:50 Gumbo

+146

Denken Sie daran, "ungültig" bedeutet nichts. Die Seite wird zu 100% der Zeit gerendert. – jfar

+16

Eigentlich "ungültig" hat sehr reale Auswirkungen. Z.B. Es kann Ihr Dokument in Quirkmodus-Rendering versetzen. Verwenden Sie in jedem Fall den HTML5 Doctype und Sie werden gültig sein. – brentonstrine

Es gibt eine gute Tabelle mit verschiedenen Doctypes und entsprechenden Browsermodi hier: https://hsivonen.fi/doctype/#handling. HTML5 Doctype schaltet alle Post-2001-Browser in den (Full) Standards-Modus um. XHTML Transitional und HTML 4 Transitional (vor allem ohne DTD) doctypes nicht :) –

Mit der Funktion jquerydata() können Sie beliebige Daten mit dom-Elementen verknüpfen. Here's an example. !

Quelle

2009-11-14 19:23:30 Draemon

Das ist golden. –

@TrevorWood und gebrochen (der Link). –

Sie Eigenschaften können fro m JavaScript.

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

Quelle

2009-11-14 22:46:14 ewg

können Sie hinzufügen, aber dann muss man auch eine Zeile Javascript schreiben:

document.createElement('tag');

um sicherzustellen, dass alles an seinem Platz fallen. Ich meine IE :)

Quelle

2012-11-19 09:27:03 defau1t

Dies wäre relevant, wenn die Der Tagname ist IE nicht bekannt. Hier ist das Problem ein benutzerdefiniertes Attribut, kein benutzerdefiniertes Tag. Das Wort "tag" in "" bedeutet hier anscheinend nur irgendein HTML-Tag. –

Bedeutet dies nicht auch, dass XHTML ungültig wird (es sei denn, es handelt sich um ein erkanntes Tag)? – Paul

element.getAttribute('key'); 
element.setAttribute('key', 'value');

Quelle

2014-08-25 12:55:29 IgniteCoders

-9

Sie können etwas tun Sie den Wert von Javascript anstelle eines Attributs

<a href='#' class='click'> 
    <span style='display:none;'>value for javascript</span>some text 
</a>

Quelle

2015-06-01 06:05:10 Frog

Ein weiterer Ansatz, der sauber ist und halten das Dokument gültig extrahieren möchten , besteht darin, die gewünschten Daten in einem anderen Tag zu verketten, z ID, dann benutze Split, um zu nehmen, was du willst, wenn du es willst.

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

Quelle

2016-12-13 16:36:03 CAtoOH

In HTML5: ja: verwenden Sie die data- attribute.Hier

<ul> 
    <li data-animal-type="bird">Owl</li> 
    <li data-animal-type="fish">Salmon</li> 
    <li data-animal-type="spider">Tarantula</li> 
</ul>

Quelle

2017-04-01 20:11:40

ist das Beispiel:

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

Hier ist ein weiteres Beispiel dafür, wie benutzerdefinierte Attribute in Body-Tag-Element:

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

Dann lesen Sie das Attribut von:

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

Sie können obigen Code in Konsole in DevTools, z.

Quelle

2017-08-03 12:13:38 kenorb

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>

Quelle

2017-10-18 22:39:55

Bitte fügen Sie eine kurze Erklärung zu Ihrer Antwort hinzu. –

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

Antwort

Verwandte Themen