Posso aggiungere un attributo personalizzato a un tag HTML?

348

Posso aggiungere un attributo personalizzato a un tag HTML come il seguente?

<tag myAttri="myVal" />

html custom-attribute

— Lovespring
fonte

3

stackoverflow.com/questions/432174/…

— Tamas Czinege,

2

e anche stackoverflow.com/questions/209428/…

— Tamas Czinege,

possibile duplicato di attributi personalizzati - Sì o no?

— Ciro Santilli 31 冠状病六四事件法轮功

Sebbene le risposte dicano "sì", assicurati di disporre di un set di attributi a tema che probabilmente non verranno utilizzati con i plug-in. ad es. "data-myuniqueattribute". Di solito ho semplicemente prefisso qualsiasi cosa dopo "dati-" con un tipo di abbreviazione di due lettere. ad es. "data-yscolumntype". Mantienilo unico.

189

Puoi modificare la tua dichiarazione! DOCTYPE (es. DTD) per consentirla, in modo che il documento [XML] sia ancora valido:

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

#IMPLIEDsignifica che è un attributo facoltativo, oppure potresti usare #REQUIRED, ecc.

Ulteriori informazioni sono disponibili in DTD - Attributi .

— carillonator
fonte

2

metti tutto questo in cima al tuo file html (supponendo che la transizione xhtml 1.0 sia ok)

— carillonator

8

Forse mi manca qualcosa, ma se segui questo approccio, il simbolo]> appare nella pagina web renderizzata. Mi sta succedendo su Firefox 3.6. Questo frammento di alistapart.com/articles/customdtd sembra verificare questo comportamento: "Se scarichi i file di esempio per questo articolo e convalidi il file internal.html, puoi vederlo da solo. Sfortunatamente, quando visualizzi il file in un browser , lo]> appare sullo schermo. Non c'è modo di aggirare questo bug, quindi questo approccio è subito chiaro. "

— Mike,

3

Un paio di cose che potrebbero aiutare con le apparenze "]>": salva il file con l'estensione .xhtml. Includi il tipo MIME nel file con <meta http-equiv="content-type" content="application/xhtml+xml" />.

— LS

4

Dichiarare l'attributo è inutile per quanto riguarda il comportamento del browser. Non leggono il DTD. Inoltre, non possono nemmeno saltare correttamente il sottoinsieme interno (che viene utilizzato qui), il che spiega le misure "]>". La dichiarazione sarebbe rilevante solo per la convalida formale e non dovrebbe essere utilizzata nelle pagine di produzione.

— Jukka K. Korpela,

32

Questa risposta si applica solo a XHTML e HTML 4.01 e precedenti. Manca del tutto che ora puoi creare i tuoi attributi se li aggiungi come prefisso data-.

— brentonstrine,

299

Puoi aggiungere attributi personalizzati ai tuoi elementi a piacimento. Ma ciò renderà il tuo documento non valido.

In HTML 5 avrai la possibilità di utilizzare attributi di dati personalizzati con prefissodata- .

— Gumbo
fonte

169

Ricorda che "non valido" non significa nulla. Il rendering della pagina andrà bene il 100% delle volte.

— John Farrell,

22

In realtà "invalido" ha implicazioni nel mondo reale. Ad esempio, può mettere il tuo documento nel rendering in modalità quirks. In ogni caso, usa il doctype HTML5 e sarai valido.

— brentonstrine,

C'è una buona tabella di diversi tipi di documenti e corrispondenti modalità del browser qui: hsivonen.fi/doctype/#handling . HTML5 doctype commuta tutti i browser post-2001 in modalità (completa) standard. I doctype XHTML Transitional e HTML 4 Transitional (specialmente senza DTD) non lo fanno :)

— Ilya Streltsyn,

santo dolce cristo, grazie. @jfar giusto ma diminuisce la leggibilità.

— Mai più il

Il mio documento non è valido in ogni caso, perché mi dice che |non è consentito in un CSS href, ma questo è ciò che è necessario per Google Fonts

— Post Self

73

No, questo interromperà la convalida.

In HTML 5 puoi / sarai in grado di aggiungere attributi personalizzati. Qualcosa come questo:

<tag data-myAttri="myVal" />

8

ma, non mi interessa la convalida, voglio solo che sia possibile accedervi tramite javascript.

— lovepring

10

Funzionerà ovviamente. Ma creare deliberatamente documenti non validi non è una buona idea.

31

La creazione di documenti non validi è un'ottima idea. Google li crea per ridurre i tempi di caricamento, ogni sito che utilizza canvas li utilizza per creare una migliore esperienza utente e l'utilizzo di framework javascript per estrarre dati significativi dagli elementi HTML è molto più semplice utilizzando la tecnica degli attributi personalizzati.

— John Farrell,

3

@jfar: Canvas non è valido. Non è in HTML 4.01; tuttavia, è una parte perfettamente legale della prossima specifica HTML5.

— Bcat,

3

Cosa intendi con "non invalido"? Non fa parte di alcuna specifica accettata. Come può qualcosa essere valido contro una specifica che non esiste?

— John Farrell,

34

La data()funzione jQuery consente di associare dati arbitrari con elementi DOM. Ecco un esempio .

— DRAEMON
fonte

1

Questo è d'oro.

— Trevor Wood,

1

@TrevorWood and broken (il link).

— Akash Agarwal,

23

In HTML5: sì: usa l' attributo data .

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

— Davide Andrea
fonte

5

Migliore autorità: developer.mozilla.org/en-US/docs/Learn/HTML/Howto/…

— Zuks,

11

Sì, è possibile, l'avete fatto nella domanda stessa: <html myAttri="myVal"/>.

— luvieere
fonte

2

Dipende da ciò che definisci HTML come. Penso all'HTML come a un linguaggio basato su SGML, con un insieme specifico di elementi e attributi. XHTML è una variante di XML, con un insieme specifico di elementi e attributi che assomigliano molto all'HTML. Quando usi i tuoi attributi, è ancora SGML di XML, ma secondo me non è più HTML di XHTML.

— Douwe Maan,

Prendilo come un'estensione ad hoc, non uno standard in senso stretto, ma una sorta di implementazione del requisito che non dovrebbe fallire nell'analisi se contiene attributi personalizzati.

— Luvieere,

2

DouweM: Certo, c'è sempre la serializzazione HTML di HTML5, che non è né SGML né XML.

— Bcat,

2

E hai rotto (invalidato) il documento nel processo. Non è una buona pratica.

— carillonatore

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>

Espandi frammento

— Jasim Droid
fonte

2

Aggiungi una breve spiegazione alla tua risposta.

— Nikolay Mihaylov,

10

Si, puoi farlo!

Avere il prossimo HTMLtag:

<tag key="value"/>

Possiamo accedere ai loro attributi con JavaScript:

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

Element.setAttribute()metti l'attributo nel HTMLtag se non esiste. Quindi, non è necessario dichiararlo nel HTMLcodice se si intende impostarlo JavaScript.

key: potrebbe essere qualsiasi nome desideri per l'attributo, mentre non è già utilizzato per il tag corrente. value: è sempre una stringa contenente ciò di cui hai bisogno.

— IgniteCoders
fonte

7

Puoi impostare le proprietà da JavaScript.

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

— EWG
fonte

4

Ecco l'esempio:

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

Ecco un altro esempio su come impostare attributi personalizzati nell'elemento tag body:

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

Quindi leggi l'attributo di:

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

Puoi testare il codice sopra nella console in DevTools, ad es

— kenorb
fonte

1

uso i dati, li uso molto

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

— Erick Boileau
fonte

Come si ottengono i data-*valori da JavaScript?

— Aaron Franke il

0

Un altro approccio, che è pulito e manterrà il documento valido, è quello di concatenare i dati desiderati in un altro tag, ad esempio id, quindi utilizzare la divisione per prendere ciò che si desidera quando lo si desidera.

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

0

Puoi aggiungere, ma poi devi scrivere anche una riga di codice JavaScript,

document.createElement('tag');

per assicurarsi che tutto vada a posto. Intendo Internet Explorer :)

— defau1t
fonte

3

Ciò sarebbe rilevante se il nome del tag non è noto a IE. Qui il problema è un attributo personalizzato, non un tag personalizzato; la parola "tag" <tag ...>qui apparentemente significa solo qualsiasi tag HTML.

— Jukka K. Korpela,

Questo non invalida anche XHTML (a meno che non sia un tag riconosciuto)?

— Paul,

0

bene! puoi effettivamente creare un gruppo di attributi HTML personalizzati nascondendo gli attributi dei dati in ciò che desideri effettivamente.

per esempio.

[attribute='value']{
color:red;
}

<span attribute="value" >hello world</span>

Apparentemente funziona, ma ciò invaliderebbe il tuo documento, non è necessario utilizzare JScript per avere attributi personalizzati o anche elementi a meno che non sia necessario, devi solo trattare i tuoi nuovi attributi formulati (personalizzati) nello stesso modo in cui tratti il tuo attributo "dati"

Ricorda che "non valido" non significa nulla. Il documento verrà caricato sempre bene. e alcuni browser in realtà convaliderebbero il tuo documento solo con la presenza di DOCTYPE ....., sai davvero cosa intendo.

— Abdulbasit
fonte

-8

Puoi fare qualcosa del genere per estrarre il valore desiderato da JavaScript anziché un attributo:

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

— Rana
fonte

Gli attributi esistono per un motivo; come le cose piace <input type="hidden" value="...">. Considera, tuttavia, la differenza tra il tipo di dati che inserisci in vari attributi in contrasto con i dati che potresti inserire in un campo nascosto. Nascondere un <span>(di tutte le cose) in un <a>per mantenere un pezzo di metadati non è una buona mossa. Sarebbe peculiare al tuo sito e molto dipendente da JS (grazioso degrado, persone).

— Jay Edwards,