Atributos propios en HTML5 (data-)

Los atributos propios juegan un papel muy importante en cuanto a semántica y estandarización, con esta nueva incorporación en HTML5 tenemos la posibilidad de crear nuestros propios atributos personalizados, ¿habéis tenido la necesidad durante un proyecto de guardar datos asociados a un determinado elemento?, para realizar este proceso hasta hace poco no teníamos muchas alternativas, entre otras tirar de las clases o los identificadores o cometer la aberración de ‘inventarnos’ un atributo, con lo que la validación de un proyecto dejaba de cumplir con los estándares del W3C.

Con los nuevos atributos propios podemos definir atributos personalizados en un elemento para almacenar información sin que sea visible al usuario, las ventajas son importantes ya que conseguimos un código más legible y válido, mejorando así el posicionamiento y el mantenimiento del sitio web.

Los programadores que creamos nuestros proyectos desde cero y nos preocupamos por escribir código válido, legible y semántico llevábamos tiempo esperando una solución para crear nuestros propios atributos y definir estilos o funcionalidades diferentes en los elementos.

Sintaxis

data-atributopropio="valorpropio"

Importante

Tanto el nombre como el valor del atributo tiene que ser una cadena (string) y no puede contener mayúsculas ni caracteres especiales.

Ni el nombre ni el valor del atributo deben contener datos sensibles.

Ejemplo

<div data-atributopropio="valorpropio" ></div>

Como acceder a los atributos

Es evidente que si utilizamos este tipo de atributos en un elemento es para que sean un recurso desde donde podamos acceder con JS, jQuery o CSS y operar sobre los mismos o recibir datos para almacenarlos y realizar alguna acción con ellos.

CSS

Desde la hoja de estilos podemos acceder a los atributos propios de la siguiente forma:

<div id="yy" data-nombre="Didesweb">
	Diseño y desarrollo web
</div>

#yy::before {
	content: attr(data-nombre) ":";
	font-weight:bold;
}
[data-nombre] {
	color:green;
}

Javascript

Podemos acceder a los atributos propios y operar sobre los mismos desde Javascript con los métodos getAttribute, setAttribute y removeAttribute

<p id="y" data-z="valorpropio">Elemento con atributo data-</p>
<button onclick="myFunction()">Try it</button>
<div id="v"></div>
<script>
function myFunction() {
var x= document.getElementById("y").getAttribute("data-z"); 
document.getElementById("v").innerHTML = x;
}
</script>

Aunque existe otra forma de acceder, utilizando la API dataset, esta API no es compatible con todos los navegadores por lo que es recomendable recurrir a librerías JS externas para su implementación si fuese necesario.

<span id="yyy" data-z="valorpropio">
	Elemento con atributo data-
</span>
<span id="vv"></span>
<script>
function myFunction2() {
	var elemento = document.getElementById("yyy");
	data = elemento.dataset;
	data.nuevovalor = 'valornuevo';
	var xx= document.getElementById("yyy").getAttribute("data-z"); 
	document.getElementById("vv").innerHTML = xx;
}
</script>

jQuery

Para acceder con jQuery lo más aconsejable es utilizar el método data(), este método no necesita el prefijo data-, accedemos al elemento con el nombre del atributo sin prefijo.

Si tenemos este elemento HTML:

<div id="qqq" data-atributopropio="valorpropio" ></div>

Obtenemos al valor del atributo con el siguiente código:

$(document).ready(function(){
	var valorAtributo = jQuery("#qqq").data('atributopropio');
	$("#m").on("click", function(){
		$("#qqq").text(valorAtributo);
	});
});

Acceso a sintaxis JSON

<div id="qqq-json" data-z='{"nombre":"valorpropio"}'></div>

var valorAtributo = jQuery("#qqq-json").data('z').nombre;

Tambien podemos agregar atributos propios a los elementos con jQuery y JSON, veamos un ejemplo más elaborado:

<button id="dddd">Obtener el valor del atributo</button>
<div id="nn">
	<span id="fff"></span>
</div>
<script>
	$(document).ready(function(){
		$("#nn").data({g: "valorpropio"});
		$("#dddd").on("click", function(){
			$("#fff").text( $("#nn").data().g);
		});
	});
</script>

Y esto es todo de momento acerca de los “Custom Data Attributes” en HTML5, muchas gracias por visitar mi sitio web, si tienes alguna duda o sugerencia puedes contactar conmigo en la pestaña “Contacto” o a través de las redes sociales.