RSS Feed

Atributos customs HTML5

4

febrero 9, 2012 by - @pjnovas

Los que habrán usado alguna vez los famosos “custom attributes” o atributos personalizados en el html, conocerán que no era recomendado, nos complicaba las validaciones de HTML y también era potencialmente peligroso para futuras versiones de HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo" 
   orden="34">
</div>
var div = document.getElementById('categorias');
var orden = div.getAttribute('orden');
div.setAttribute('otro','algunValor');

HTML5 nos trae otra forma de verlo, todo attributo custom que utilicemos, hagamoslo con “data-*”, es decir siempre con el “data-” y nuestro custom, de esta manera el validador de html no molesta, ni tampoco tendremos problemas con futuras versiones de HTML:

<!DOCTYPE HTML>

<div id="categorias" class="contendor rojo" data-orden="34">
</div>
var div = document.getElementById('categorias');
var orden = div.getAttribute('data-orden');
div.setAttribute('data-otro', 'algunValor');

jQuery .data()

jQuery tiene un metodo, jQuery.data(), para poder guardar y recuperar objetos de un elemento en particular del DOM.

$('#categorias').data('orden', 56);

Lo que hay q tener en cuenta cuando utilizo el .data() es que jquery se encarga de comprobar la version de nuestro documento y va a utilizar el “data-” o no. Ojo con esto, porque por ahi contamos con que tenemos un atributo y en realidad no:

var valores = [ 20 , 21 , 22 , 23 ];
$('#categorias').data('orden', valores);
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo">
</div>
<!DOCTYPE HTML>

<div id="categorias" class="contendor rojo" 
   data-orden="[20,21,22,23]">
</div>

Cuando la version de HTML no es 5, jQuery no lo almacena como atributo del HTML, hay que tener cuidado con esto, porque si agregamos el atributo en el HTML y despues queremos ir a buscarlo no utilizando HTML 5, tenemos que obtenerlo como .attr() en vez de .data() en jQuery.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<div id="categorias" class="contendor rojo" orden="43">
</div>
var orden = $('#categorias').data('orden'); // undefined
var orden = $('#categorias').attr('orden'); // 43


  • Anónimo

    Cuando te traés la data con javascript plano, además de poder hacer el getAttribute podés consultar la propiedad dataset que ya está soportada en la mayoría de los browsers.
    http://caniuse.com/#search=dataset

    El uso seria algo así

    var div = document.getElementById('categorias');
    var orden = div.dataset.orden;

    Saludos

  • Max

    gracias amigo..muy bien explicado!

  • Pingback: homes for sale in chicago

  • Pingback: quest protein bars