Agregar atributos a las etiquetas HTML 5

Facebooktwittergoogle_pluslinkedinmailFacebooktwittergoogle_pluslinkedinmail

Cuando desarrollamos la parte front-end de una aplicación web, a menudo nos encontramos con que tenemos que poder referenciar distintos elementos HTML, como pueda ser un imagen, un bloque, un párrafo, etc. Necesitamos referenciarlos para gestionarlos desde CSS o desde JavaScript.

En la mayoría de las ocasiones, nos basta con usar propiedades como el id, o un nombre específico de clase que le apliquemos al elemento. Sin embargo, hay ocasiones con las que eso no es suficiente, y necesitamos atributos no normalizados.

En los días oscuros (y, por suerte, ya lejanos) de HTML 4, añadir esos atributos era un dolor de cabeza, empleando instrucciones JavaScript que ni siquiera eran aceptadas por la mayoría de los navegadores. Afortunadamente, el estándar HTML 5 hace que esto sea fácil de hacer y, lo que es más importante, de utilizar.

AÑADIR ATRIBUTOS A LAS ETIQUETAS

A una etiqueta HTML se le pueden añadir todos los atributos que quieras, con los valores que desees, siempre que el nombre de cada atributo sea data-xxxxx, donde xxxxx es el nombre que quieras darle, y el prefijo data- es obligatorio. Por ejemplo, veamos una imagen con tres atributos personalizados:

<img src="foto.jpg" id="foto" class="clase_propia" data-count="1" data-store="mi_directorio" data-name="mi_foto">

Así de simple. Los atributos que hemos añadido con el nombre prefijado con data- ya son parte de ese elemento en concreto (no de cualquier imagen: de aquella a la que se los hemos añadido), como si fueran propiedades nativas del elemento. Ya podemos usarlos para referenciarlo desde CSS o desde JavaScript.

DESDE CSS

Si queremos referenciar un elemento que tenga un atributo personalizado para atribuirle, por ejemplo, reglas de estilo, nada más fácil. Suponte que quieres usar la misma imagen que acambamos de incorporar en nuestra web con la etiqueta que hemos visto.

img[data-name = 'mi_foto'] {
    width: 12rem;
    border: .2rem solid grey;
}

o bien:

img[data-count = '1'] {
    width: 12rem;
    border: .2rem solid grey;
}

o bien:

img[data-store = 'mi_directorio'] {
    width: 12rem;
    border: .2rem solid grey;
}

Es decir, usamos los nuevos atributos como si fueran atributos normalizados de los de toda la vida, porque, a partir del momento en que se añadieron al objeto (recuerda: siempre con el prefijo data-) lo son, para ese objeto en concreto.

Incluso podemos usarlo con pseudo elementos, así:

img[data-count = '1']::after {
    content: attr(data-name);
    background-color: skyblue;
    color: grey;
}

DESDE JAVASCRIPT

Bueno. Más bien desde jQuery. Después de todo, el uso de JavaScript plano para manipular el DOM está cada vez más en desuso, lo que, por otra parte, es lógico. Esta es una observación que podría haber omitido por obvia, pero me ha parecido adecuado incluirla.

A lo que vamos. Podemos usar los atributos “nuevos” para detectar un evento sobre el objeto, así:

$('img[data-name="mi_foto"]').on('click', function() {
    // Código a ejecutar
}

O bien, para actuar sobre el elemento:

$('img[data-name="mi_foto"]').on('click', function() {
    $('img[data-name="mi_foto"]').css('width', '300px');
}

Como ves, más fácil imposible. Lo que hubiéramos dado hace años por algo así.

     

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *