Saludos a todos, hoy escribiré sobre unos de los cambios que trae HTML5, del cual se han apoyado varias APIs que existen hoy en día y unos de los que más me llamó la atención cuando me entere que la nueva especificación de html lo incluía, estoy hablando de los atributos personalizados. Una de los puntos que me llaman la atención es que por medio de estos atributos personalizados podemos añadir información a las etiqueta html sin salirnos de la especificación y sin afectar la parte visual de la etiqueta, también los podemos usar en css por medio de los selectores y en javascript.
Iniciemos …
Para usar un atributo personalizado en una etiqueta se usa el atributo [data-], luego del guión va el nombre que queremos especificar por ejemplo data-numero, estos serían algunos ejemplos.
<div data-saludo="hola"></div>
<div data-numero="1"></div>
Valga aclarar que el nombre que le demos después del guión no hace diferencia entre letras mayúsculas o minúsculas.
Con css podemos acceder a este atributo de varias formas una de ella es por los selectores y en específico el selector de atributo y para ver un poco miremos el siguiente ejemplo.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
-webkit-box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
padding: 0.2rem;
}
div[data-saludo]{
background-color: cornflowerblue;
}
div[data-saludos]{
background-color: aquamarine;
}
div[data-numero]::after{
content: ' (' attr(data-numero) ')';
}
</style>
</head>
<body>
<div data-saludo="hola">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam vero, dolore expedita ea quae hic odio id, voluptatem natus autem sed doloribus modi saepe explicabo accusantium quam non cumque! Similique?
</div>
<div data-SALUDOS="holaTodos">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio delectus assumenda dolore tempore quod! Dolor tempore laboriosam autem et laborum fugit ea! At eum voluptas quidem, pariatur quisquam illum magnam.
</div>
<div data-numero="333">
numero:
</div>
<div data-numero="130">
numero:
</div>
</body>
</html>
esto se visualizaria
Se definieron cuatro etiquetas div, cada una con un atributo personalizado, las reglas css que se definieron son las siguientes:
div{
-webkit-box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
-moz-box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
box-shadow: 10px 12px 20px 0px rgba(0,0,0,0.6);
padding: 0.2rem;
}
esta regla dice que a todos los div se aplique una sombra.
div[data-saludo]{
background-color: cornflowerblue;
}
Esta regla aplica el color de fondo cornflowerblue si una etiqueta div tiene un atributo llamado data-saludo.
div[data-saludos]{
background-color: aquamarine;
}
Esta regla aplica el color de fondo aquamarine si una etiqueta div tiene un atributo llamado data-saludo, hay que destacar en la definicion del div en el archivo html el atributo se escribió de la siguiente manera data-SALUDOS, y en la regla css está definido todo en minúsculas.
div[data-numero]::after{
content: ' (' attr(data-numero) ')';
}
La anterior regla, define que si un div tiene un atributo nombrado data-numero se aplique después del contenido de la etiqueta la impresión del valor del atributo data-numero de la etiqueta div.
Ahora para acceder al atributo a través de javascript usamos el método dataset del DOM, miremos el siguiente ejemplo para ver cómo funciona.
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function impMensaje() {
var div = document.getElementById('divMensaje');
alert(div.dataset.mensaje);
}
</script>
</head>
<body>
<div id="divMensaje" data-mensaje="mensaje_div">
<input type="button" value="clic" onclick="impMensaje();" />
</body>
</html>
En el código anterior se define una etiqueta div con el atributo personalizado data-mensaje al cual se le asigna el valor mensaje_div, se crea una etiqueta input tipo button, la función javascript es simple solo se obtiene la etiqueta div y se accede al atributo personalizado por medio del atributo dataset.
Ha sido un corto post, pero de gran valor, con los atributos personalizados en las etiquetas html podemos dar un poco más de dinamismo a las páginas, cargar datos mediante javascript en estos atributos.
Como siempre espero sea de ayuda.
Saludos.
