obtener atributos de datos en código JavaScript

html custom-data-attribute

Question

Tengo el siguiente html:

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

¿Es posible obtener los atributos que comienzan con data- y usarlo en el código JavaScript como el código a continuación? Por ahora me pongo null como resultado.

document.getElementById("the-span").addEventListener("click", function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});

Answer 1

Los navegadores modernos aceptan HTML y SVG DOMnode.dataset

Uso de la propiedad de conjunto de datos de nodo DOM de Javascript puro .

Es un antiguo estándar Javascript para elementos HTML (desde Chorme 8 y Firefox 6) pero nuevo para SVG (desde Chorme 55 y Firefox 51).

Los valores de los valores-clave del conjunto de datos son cadenas puras, pero una buena práctica es adoptar el formato de cadena JSON para tipos de datos que no sean cadenas, para analizarlo mediante JSON.parse() .

Usándolo

Fragmento de código para obtener y establecer conjuntos de datos de valores clave en HTML y SVG.

console.log("-- GET values --")
var x = document.getElementById(''html_example'').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById(''g1'').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById(''svg_example'').innerHTML )

<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Answer 2

Debe acceder a la propiedad del dataset :

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});

Resultado:

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Answer 3

Debido a que Internet Explorer no admitía la propiedad del dataset hasta la versión 11, es posible que desee utilizar getAttribute() lugar:

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute(''data-type''));
});

Documentación del conjunto de datos

documentación de getAttribute

Answer 4

Pruebe esto en lugar de su código:

var type=$("#the-span").attr("data-type");
alert(type);

Answer 5

Puedes acceder a él como

element.dataset.points

etc. Entonces en este caso: this.dataset.points

Answer 6

si está apuntando al atributo de datos en el elemento Html,

document.dataset no funcionará

Deberías usar

document.querySelector("html").dataset.pbUserId

o

document.getElementsByTagName("html")[0].dataset.pbUserId