Aprende a usar los atributos de datos en html5

Cómo guardar información en un elemento DOM, introducción a los atributos de datos HTML5

¿Cuáles son los atributos data- *

Un atributo de datos es simplemente otro atributo simple para cualquier etiqueta html, cualquier atributo en cualquier elemento cuyo nombre de atributo comience con datos es un atributo de datos. Puede guardar cualquier tipo de información en él.

Se puede acceder a esos atributos con Javascript y CSS.

Cómo utilizar datos- * atributos

Para agregar un atributo de datos, necesitamos:

  • Alguna información para guardar
  • Deseo de vivir

Simplemente agregue un atributo (como class = "myclass") a la etiqueta que desee. Por ejemplo, en el siguiente div se guardarán algunos datos para recuperar 

<div id="randomid" data-articleid="123" data-maincategorie="articles" data-categories="[1,23,35,68,6]" data-gifpath="/path/to/gif.gif">
  <h3>My article title</h3>
  <p>
    Article content
  </p>
</div>

Accediendo a atributos de datos con Javascript

Hay muchas formas de recuperar un atributo de datos con javascript:

Javascript de alta compatibilidad (recomendado)

var domElement = document.getElementById('randomid');
var articleId = domElement.getAttribute('data-articleid');
console.log(articleId);//Outputs 123

Usaremos la función nativa getAttribute y daremos el nombre completo del atributo incluyendo datos- , esta está disponible en todos los navegadores.

Conjuntos de datos de JavaScript

Como característica nueva de html5, en los navegadores modernos puede recuperar un valor de atributo de datos utilizando la propiedad del conjunto de datos . Escriba solo el nombre sin datos

var domElement = document.getElementById("randomid");
var articleId = domElement.dataset.articleid;
console.log(articleId);//Outputs 123

Como puede ver, los datos se han traducido a propiedades en el objeto de conjunto de datos del elemento.

jQuery

Con jQuery usaremos la función .data () . Si está usando una versión de jQuery anterior, puede usar la función .attr () en su lugar.

var $domElement = $('#randomid');
var articleId = $domElement.data('articleid');
console.log(articleId); // Outpusts 123

Si está usando una versión anterior, use la función attr y escriba el nombre completo, incluidos los datos :

var $domElement = $('#randomid');
var articleId = $domElement.attr('data-articleid');

Accediendo a atributos de datos con CSS

Como los atributos de datos son atributos HTML simples, incluso puede acceder a ellos desde CSS.

Para recuperarlo con css use la función attr (), por ejemplo, en este caso, la identificación del artículo se colocará antes de la identificación con la siguiente regla:

div::before {
  content: attr(data-articleid);
}

Para usar estos atributos de datos para personalizarlos con estilos, use:

/**
 * Todos los div con data-maincategorie = 'articles' tendrán azul como color de fondo
 **/
div[data-maincategorie='articles'] {
  background-color: blue; 
}

Notas importantes :

  • No guarde ninguna información confidencial, ya que se puede ver en el código fuente.
  • No use mayúsculas con los atributos data- * (se verán obligados a usar minúsculas automáticamente, pero si no lo sabe, perderá tiempo tratando de recuperarlos con javascript con el nombre incorrecto).
  • Para admitir IE 10 y menores, debe acceder a los atributos de datos con getAttribute ().
  • Son una gran solución para mini conjuntos de datos.

Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores