¿Cómo obtener lo valores de los atributos data con el dataset API de JavaScript?

Estrada Web Group
Administrador
¿Cómo obtener lo valores de los atributos data con el dataset API de JavaScript?

JavaScript leer atributos data con el dataset api de JavaScript

Los atributos data-* que fueron introducidos en HTML5, nos facilitan la definición de datos personalizados asociados directamente a los elementos DOM de forma estandarizada.

Con JavaScript podemos leer los valores de estos atributos data.*, así como jQuery nos ofrece su método .data(), JavaScript nos ofrece el API Dataset que nos permite obtener y establecer los valores de los atributos data-* de una forma muy sencilla.

Ejemplo HTML data.*

<div id="cardWeb" data-web="Estrada Web Group" data-type="Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery" data-nivel ="100%">
    Información de Estrada Web Group
</div>

El atributo en el dataset elimina el prefijo data-, por ejemplo, tomemos los atributos data-* del ejemplo anterior. Esta es su correspondencia en el dataset:

data-web → web

data-type → type

data-nivel → nivel

Y se accederíamos a su valor de la siguiente manera:

// Obtenemos una referencia al elemento DIV
var webcard = document.getElementById("cardWeb ");
// En la propiedad dataset del elemento estarán todos los atributos data-*
var strWeb = webcard.dataset.web; //Resultado: Estrada Web Group
var strType = webcard.dataset.type; //Resultado: Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery
var strNivel = webcard.dataset.nivel; //Resultado: 100%

Es decir, el webcard.dataset sería el siguiente objeto:

{
    web: "Estrada Web Group",
    type: "Desarrollo Web, Xamarin, C#, MVC, JavaScript, jQuery",
    nivel: "100%"
}

Para modificar los valores de los atributos data-* es muy simple, por ejemplo, cambiar data-nivel a “full”, es tan fácil como asignarle el nuevo valor:

// Asignamos un nuevo valor al elemento nivel del dataset,
// el cual hacía referencia al atributo data-nivel  
webcard.dataset.nivel  = "full";

Para eliminar un valor podríamos asignarle el valor null o un string vacío, pero si queremos eliminar realmente el atributo data-* hay que utilizar el operador delete.

delete webcard.dataset.nivel;

 

Compartir artículo:

Más artículos geniales

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla ;