Antes de HTML5 los diseñadores y desarrolladores utilizabamos atributos como class, id o rel para definir datos personalizados con el fin de aportar cierta metadata a los elementos HTML. Obviamente, esta práctica no era la mejor solución pero facilitaba nuestro trabajo.
Pero ahora, con el estándar HTML5 se introducen los atributos data-*, cuya función es la de almacenar información personalizada sobre nuestros elementos HTML, con lo cual evitamos tener que emplear múltiples clases.
Por ejemplo, supongamos que queremos asociar un <div> contenedor con la información de un usuario:
<div id="fName" data-user="ariel">
Info del usuario Ariel
</div>
Tal y como puedes notar, hemos sustituído el signo de asterisco (*) por un cualquiera escrito en minisculas. Sin embargo, debes tener en cuenta que existen ciertas reglas que debes seguir al definir los nombres personalizados, por ejemplo:
- El nombre no debe de contener algún punto y coma, ni caracteres especiales distintos a [a-z].
- Puede contener números, pero el tipo de datos es string.
- El nombre no debe de contener letras mayúsculas.
Luego, si queremos acceder al valor del atributo data-* mediante Javascript utilizaremos la propiedad dataset:
(function () {
var fName = document.getElementById('fName');
console.log(fName.dataset);
console.log(fName.dataset.user);
fName.dataset.user += " changed!";
console.log(fName.dataset.user);
})();
- Los mejores Frameworks CSS: una guía completa para desarrolladores - septiembre 14, 2024
- Qué es una página web estática, cómo funciona y cómo crearla - septiembre 2, 2024
- Números en JavaScript - agosto 2, 2024