Que son los atributos data-toggle, data-set, etc. en HTML5

2 minuto(s)

En esta página:

Demo Github

Muchas veces has visto en diferentes proyectos webs los atributos data-toggle, data-set, data-color, data-speed y muchos otros más, esto parece para los que no conocen mucho sobre el tema, que en HTML5 aún quedan muchas cosas que aprender.

Primero que nada No debes asustarte ni preocuparte, los ‘data-atributo’ son atributos personalizados los cuales pueden ser creados por un desarrollador web para aplicarle una funcionalidad o interacción con Javascript o un estilo mediante CSS. El nombre que le asignemos puede ser el que deseemos, es por eso que vemos diferentes nombres personalizados que nos hace pensar que HTML5 cuenta con mas atributos.

Vamos a ver como funciona un atributo personalizado y haremos que interactue con Javascript y con CSS. A continuación crearé un botón y le asignaremos un atributo personalizado junto con un id para ver como trabajan:


<button type="button" class="btn btn-primary mt-3" data-toggle="modal" data-target="#myModal" id="gastronomia" data-gastronomia="Mexicana">
  Mi Botón
</button>

Mi Botón

</button>

Puedes ver que le he agregado el atributo data-gastronomia=‘Mexicana’ y un id=‘gastronomia’ .

Tema aparte si deseas puedes ver que Bootstrap usa 2 atributos personalizados en el botón para lanzar su ventana Modal, estos atributos son data-toggle=’modal’ y data-target=’#myModal’ para mostrar una ventana modal, ellos lo han personalizado para que funcione sin problemas en el Framework.

Manipulando nuestro atributo con Javascript

Ahora usaremos la propiedad dataset de Javascript para modificar el atribulo de Mi Botón que tiene como atributo data-gastronomia=“Mexicana” y haremos que este atributo diga ahora data-gastronomia=“Española”


<script type="text/javascript">
   "use strict";

   var ca = document.querySelector('#gastronomia');
   var fca = ca.dataset.gastronomia = "Española";
</script>

"use strict";

var ca = document.querySelector('#gastronomia');

var fca = ca.dataset.gastronomia = "Española";

</script>

Lo que hace el código Javascript es modificar el botón que hemos creado anteriormente con el atributo data-gastronomia=“Mexicana” y nos muestra ahora data-gastronomia=“Española”

Manipulando nuestro atributo con CSS

Ahora usaremos CSS, voy a crear una lista indefinida <ul></ul> y le agregaré el atributo data-postre=” “ a sus elementos <li></li> y pintare de color #FFC425 el elemento con el atributo data-postre=“Arroz con Leche”


<ul style="list-style-type: none;">
   <li data-postre="Torta de Chocolate">Torta de Chocolate </li>
   <li data-postre="Arroz con Leche">Arroz con Leche </li>
   <li data-postre="Torta de Fresa">Torta de Fresa </li>
</ul>

<li data-postre="Torta de Chocolate">Torta de Chocolate </li>

<li data-postre="Arroz con Leche">Arroz con Leche </li>

<li data-postre="Torta de Fresa">Torta de Fresa </li>

</ul>

Ahora en mi hoja de estilos manipulo el atributo data-postre=“Arroz con Leche” de la siguiente manera:


li[data-postre='Arroz con Leche'] {
   color: #FFC425;
}

li[data-postre='Arroz con Leche'] {

color: #FFC425;

}

También puedes manipular tu atributo personalizado con jQuery:


var emp = $('li[data-postre="Arroz con Leche"]').hide();

var emp = $('li[data-postre="Arroz con Leche"]').hide();

Con esto ocultamos el elemento con el atributo data-postre=“Arroz con Leche”, con la función .hide() , podemos aprovechar la potencia de la librería javascript mas famosa del mundo jQuery.

Espero que te aclare muchas dudas que tenías con estos atributos personalizados de HTML5.

Síguenos en nuestras Redes sociales y Suscríbete a nuestro canal de Youtube, eso nos motiva a seguir adelante.

Nos vemos hasta un próximo artículo.