¿Puedo agregar un atributo personalizado a una etiqueta HTML?

348

¿Puedo agregar un atributo personalizado a una etiqueta HTML como el siguiente?

<tag myAttri="myVal" />
html custom-attribute primavera amorosa
fuente
3
stackoverflow.com/questions/432174/…
Tamas Czinege
2
y también stackoverflow.com/questions/209428/…
Tamas Czinege el
posible duplicado de atributos personalizados: ¿sí o no?
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
Aunque las respuestas dicen "sí", asegúrese de tener un conjunto temático de atributos que probablemente no se utilizarán con complementos. por ejemplo: "data-myuniqueattribute". Generalmente prefijo cualquier cosa después de "data-" con algún tipo de abreviatura de dos letras. por ejemplo: "data-yscolumntype". Mantenlo único.

Respuestas:

189

Puede modificar su declaración! DOCTYPE (es decir, DTD) para permitirla, de modo que el documento [XML] siga siendo válido:

<!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 que es un atributo opcional, o podría usar #REQUIRED, etc.

Más información está en DTD - Atributos .

carillonador
fuente
2
simplemente ponga todo eso en la parte superior de su archivo html (suponiendo que xhtml 1.0 transicional esté bien)
carillonator
8
Tal vez me falta algo, pero si sigues este enfoque, el]> aparece en la página web representada. Pasándome en Firefox 3.6. Este fragmento de alistapart.com/articles/customdtd parece verificar este comportamiento: "Si descarga los archivos de muestra para este artículo y valida el archivo internal.html, puede verlo usted mismo. Desafortunadamente, cuando muestra el archivo en un navegador , el]> aparece en la pantalla. No hay forma de evitar este error, por lo que este enfoque está listo ".
Mike
3
Un par de cosas que podrían ayudar con las apariencias "]>": guarde el archivo con una extensión de nombre de archivo .xhtml. Incluya el tipo MIME en el archivo con <meta http-equiv="content-type" content="application/xhtml+xml" />.
LS
44
Declarar el atributo no tiene sentido en lo que respecta al comportamiento del navegador. No leen la DTD. Además, ni siquiera pueden omitir correctamente el subconjunto interno (que se usa aquí), lo que explica la medida "]>". La declaración sería relevante solo para la validación formal, y no debe usarse en páginas de producción.
Jukka K. Korpela
32
Esta respuesta solo se aplica a XHTML y HTML 4.01 y anteriores. Se pierde por completo que ahora puedes crear tus propios atributos si los prefijas data-.
brentonstrine
299

Puede agregar atributos personalizados a sus elementos a voluntad. Pero eso hará que su documento sea inválido.

En HTML 5 tendrá la oportunidad de utilizar atributos de datos personalizados con el prefijodata- .

Gumbo
fuente
169
Recuerde "inválido" no significa nada. La página estará bien el 100% del tiempo.
John Farrell el
22
En realidad, "inválido" tiene implicaciones muy reales. Por ejemplo, puede poner su documento en un modo peculiar. En cualquier caso, use el doctype HTML5 y será válido.
brentonstrine
Aquí hay una buena tabla de diferentes tipos de documentos y modos de navegador correspondientes: hsivonen.fi/doctype/#handling . HTML5 doctype cambia todos los navegadores posteriores a 2001 al modo estándar (completo). Doctypes XHTML Transitional y HTML 4 Transitional (especialmente sin DTD) no :)
Ilya Streltsyn
santo dulce cristo, gracias. @jfar bien pero disminuye la legibilidad.
Nunca más
Mi documento no es válido de todos modos, porque me dice que |no está permitido en un CSS href, pero eso es lo que es necesario para Google Fonts
Post Self
73

No, esto romperá la validación.

En HTML 5 puede / podrá agregar atributos personalizados. Algo como esto:

<tag data-myAttri="myVal" />

fuente
8
pero no me importa la validación, solo quiero que javascript pueda acceder a ella.
lovespring
10
Funcionará por supuesto. Pero crear deliberadamente documentos inválidos no es una buena idea.
31
Crear documentos inválidos es una gran idea. Google los crea para reducir los tiempos de carga, cada sitio que usa el lienzo los usa para crear una mejor experiencia de usuario, y usar marcos de JavaScript para extraer datos significativos de los elementos html es mucho más fácil usando la técnica de atributo personalizado.
John Farrell el
3
@jfar: el lienzo no es inválido. No está en HTML 4.01; sin embargo, es una parte perfectamente legal de la próxima especificación HTML5.
bcat
3
¿Qué quieres decir con "no inválido"? No es parte de ninguna especificación aceptada. ¿Cómo puede algo ser válido contra una especificación que no existe?
John Farrell el
34

La data()función jQuery le permite asociar datos arbitrarios con elementos DOM. Aquí hay un ejemplo .

Draemon
fuente
1
Esto es dorado
Trevor Wood
1
@TrevorWood y roto (el enlace).
Akash Agarwal
11

Sí, se puede, que lo hizo en la propia pregunta: <html myAttri="myVal"/>.

luvieere
fuente
2
Depende de cómo se defina HTML. Pienso en HTML como un lenguaje basado en SGML, con un conjunto específico de elementos y atributos. XHTML es una variante de XML, con un conjunto específico de elementos y atributos que se parece mucho a HTML. Cuando usa sus propios atributos, sigue siendo SGML de XML, pero en mi opinión ya no es HTML de XHTML.
Douwe Maan el
Tómelo como una extensión ad hoc, no como un estándar en sentido estricto, sino como una implementación del requisito de que no debe fallar el análisis si contiene atributos personalizados.
luvieere
2
DouweM: Por supuesto, siempre existe la serialización HTML de HTML5, que no es SGML ni XML.
bcat
2
Y rompiste (invalidaste) el documento en el proceso. No es una buena práctica.
carillonador el
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>
Expandir fragmento

Jasim Droid
fuente
2
Agregue una breve explicación a su respuesta.
Nikolay Mihaylov
10

¡Sí, tú puedes hacerlo!

Tener la siguiente HTMLetiqueta:

<tag key="value"/>

Podemos acceder a sus atributos con JavaScript:

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

Element.setAttribute()ponga el atributo en la HTMLetiqueta si no existe. Por lo tanto, no necesita declararlo en el HTMLcódigo si va a configurarlo JavaScript.

key: podría ser cualquier nombre que desee para el atributo, mientras que aún no se utiliza para la etiqueta actual. value: siempre es una cadena que contiene lo que necesita.

IgniteCoders
fuente
7

Puede establecer propiedades desde JavaScript.

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

Aquí está el ejemplo:

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

Aquí hay otro ejemplo de cómo establecer atributos personalizados en el elemento de etiqueta del cuerpo:

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

Luego lea el atributo por:

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

Puede probar el código anterior en la consola en DevTools, p. Ej.

JS Console, DevTools en Chrome

kenorb
fuente
1

uso data-any, los uso mucho

<aside data-area="asidetop" data-type="responsive" class="top">
Erick Boileau
fuente
¿Cómo se obtienen data-*valores de JavaScript?
Aaron Franke
0

Otro enfoque, que es limpio y mantendrá el documento válido, es concatenar los datos que desea en otra etiqueta, por ejemplo, id, luego use dividir para tomar lo que quiera cuando lo desee. 

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

Puede agregar, pero también debe escribir una línea de código JavaScript,

document.createElement('tag');

para asegurarte de que todo esté en su lugar. Me refiero a Internet Explorer :)

defau1t
fuente
3
Esto sería relevante si el nombre de la etiqueta no es conocido por IE. Aquí el problema es un atributo personalizado, no una etiqueta personalizada; la palabra "etiqueta" <tag ...>aquí aparentemente significa cualquier etiqueta HTML.
Jukka K. Korpela
¿No invalida esto también XHTML (a menos que sea una etiqueta reconocida)?
Paul
0

¡bien! en realidad puede crear un montón de atributos HTML personalizados al disfrazar los atributos de datos en lo que realmente desea.

p.ej. 

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

Aparentemente funciona, pero eso invalidaría su documento, no es necesario usar JScript para que tenga atributos personalizados o incluso elementos, a menos que tenga que hacerlo, solo necesita tratar sus nuevos atributos formulados (personalizados) de la misma manera que trata su atributo "datos"

Recuerde que "inválido" no significa nada. El documento se cargará bien en todo momento. y algunos navegadores en realidad validarían su documento solo con la presencia de DOCTYPE ....., realmente saben a qué me refiero.

Abdulbasit
fuente
-8

Puede hacer algo como esto para extraer el valor que desea de JavaScript en lugar de un atributo:

<a href='#' class='click'>
    <span style='display:none;'>value for JavaScript</span>some text
</a>
Rana
fuente
Los atributos existen por una razón; como hacer cosas como <input type="hidden" value="...">. Considere, sin embargo, la diferencia entre el tipo de datos que coloca en varios atributos en contraste con los datos que podría colocar en un campo oculto. Esconder un <span>(de todas las cosas) en a <a>para mantener una pieza de metadatos no es un buen movimiento. Sería peculiar de su sitio y muy dependiente de JS (degradación graciosa, personas).
Jay Edwards el