tipos - para qué sirve el elemento data-* en html
¿Puedo agregar un atributo personalizado a la etiqueta HTML? (13)
Aquí está el ejemplo:
document.getElementsByTagName("html").foo="bar"
Aquí hay otro ejemplo de cómo configurar atributos personalizados en un elemento de etiqueta de cuerpo:
document.getElementsByTagName(''body'')[0].dataset.attr1 = "foo";
document.getElementsByTagName(''body'')[0].dataset.attr2 = "bar";
Luego lee 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, por ejemplo
¿Puedo agregar un atributo personalizado a una etiqueta HTML como esta? <tag myAttri="myVal" />
En HTML5: sí: usar el atributo de datos .
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
La función jquery data() permite asociar datos arbitrarios con elementos dom. Aquí hay un ejemplo .
No, esto romperá la validación.
En HTML 5 puede / podrá agregar atributos personalizados. Algo como esto:
<tag data-myAttri="myVal" />
Otro enfoque, que es limpio y mantendrá el documento válido, es concatenar los datos que desea en otra etiqueta, por ejemplo, id, luego usar split 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>
Puede agregar atributos personalizados a sus elementos a voluntad. Pero eso hará que tu documento sea inválido.
En HTML 5 tendrá la oportunidad de utilizar atributos de datos personalizados con el prefijo de data- .
Puede establecer propiedades desde JavaScript.
document.getElementById("foo").myAttri = "myVal"
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>
Puede modificar su declaración! DOCTYPE (es decir, DTD) para permitirlo, de modo que el documento [XML] aún sea 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>
]>
#IMPLIED significa que es un #IMPLIED opcional, o podría usar #REQUIRED , etc.
Más información aquí:
Puedes agregar, pero también tienes que escribir una línea de javascript:
document.createElement(''tag'');
para asegurarse de que todo caiga en su lugar Me refiero a IE :)
Puedes hacerlo de forma nativa con JavaScript:
element.getAttribute(''key''); // Getter
element.setAttribute(''key'', ''value''); // Setter
Sí, puedes hacerlo en la pregunta: <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>