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);
})();
Inicialmente me formé como Técnico en Anális y Diseño de sistemas. Luego ingresé a la escuela de negocios, hice una licenciatura en Administración y obtuve una especialización (Post-grado) en Alta Dirección Empresarial. Desde el año 2007 me dedico a la creación de sitios web, lo cual combino con la consultoría y la capacitación de tecnologías de Internet.
- TypeScript vs. JavaScript: ¿Cuál es mejor para tus proyectos? - octubre 31, 2024
- Optimización de imágenes: clave para un diseño web eficiente - septiembre 28, 2024
- Objetos en JavaScript - septiembre 21, 2024
