Agregar html5 data

Atributo de datos html

Por suerte, ya no tienes que hacerlo, ya que HTML5 ha introducido nuevos atributos globales data-* que permiten incrustar información adicional en cualquier elemento HTML. Los nuevos atributos data-* hacen que HTML sea más extensible, lo que permite crear aplicaciones más complejas y una experiencia de usuario más sofisticada sin tener que recurrir a técnicas que consumen muchos recursos, como las llamadas Ajax o las consultas a bases de datos del servidor.

La sintaxis de los nuevos atributos data-* es similar a la de los atributos aria-prefixed. Puede insertar cualquier cadena en minúsculas en lugar del signo *. También es necesario asignar un valor a cada atributo en forma de cadena.

Supongamos que desea crear una página Quiénes somos y almacenar el nombre del departamento en el que trabaja cada empleado. No tienes que hacer nada más aparte de añadir el atributo personalizado data-department al elemento HTML apropiado de la siguiente manera:

Los atributos personalizados data-* son globales, al igual que los atributos class e id, por lo que puedes utilizarlos en todos los elementos HTML. También puedes añadir tantos atributos data-* a una etiqueta HTML como quieras. En el ejemplo anterior, por ejemplo, puedes introducir un nuevo atributo personalizado llamado data-user para almacenar los nombres de usuario de los empleados.

Añadir atributo de datos javascript

Article ActionsUsando atributos dataHTML está diseñado con extensibilidad en mente para datos que deben ser asociados con un elemento en particular pero que no necesitan tener un significado definido. Los atributos data-* nos permiten almacenar información extra en elementos HTML estándar y semánticos sin otros hacks como atributos no estándar, o propiedades extra en DOM.Sintaxis HTMLLa sintaxis es simple. Cualquier atributo en cualquier elemento cuyo nombre empiece por data- es un atributo data. Digamos que tienes un artículo y quieres almacenar alguna información extra que no tiene representación visual. Simplemente usa atributos data para eso:

Cada propiedad es una cadena y puede ser leída y escrita. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a “5”.Acceso CSSTen en cuenta que, como los atributos de datos son atributos HTML planos, incluso puedes acceder a ellos desde CSS. Por ejemplo, para mostrar los datos del padre en el artículo puedes utilizar contenido generado en CSS con la función attr():

Obtener elemento por atributo de datos

Acciones del artículoUso de atributos dataHTML se ha diseñado pensando en la extensibilidad de los datos que deben asociarse a un elemento concreto, pero que no tienen por qué tener un significado definido. Los atributos data-* nos permiten almacenar información adicional en elementos HTML estándar y semánticos sin necesidad de otros trucos, como atributos no estándar o propiedades adicionales en DOM.Sintaxis HTMLLa sintaxis es sencilla. Cualquier atributo en cualquier elemento cuyo nombre empiece por data- es un atributo data. Digamos que tienes un artículo y quieres almacenar alguna información extra que no tiene representación visual. Simplemente usa atributos data para eso:

Cada propiedad es una cadena y puede ser leída y escrita. En el caso anterior, establecer article.dataset.columns = 5 cambiaría ese atributo a “5”.Acceso CSSTen en cuenta que, como los atributos de datos son atributos HTML planos, incluso puedes acceder a ellos desde CSS. Por ejemplo, para mostrar los datos del padre en el artículo puedes utilizar contenido generado en CSS con la función attr():

Atributo de datos css

HTML5 nos ha dado la posibilidad de añadir fragmentos arbitrarios de información a cualquier elemento para utilizarlos entre bastidores con el fin que deseemos. Esto se conoce como atributos de datos y yo les di un buen uso en mi Tabla Periódica Interactiva. Hay un montón de información sobre el tema, pero a menudo con ejemplos simplistas o artificiales, así que aquí voy a presentar un uso del mundo real con una versión simplificada de la Tabla Periódica.

Al hacer clic en un elemento, aparece una alerta con el nombre, el número atómico y el símbolo químico de ese elemento. Probablemente habrás adivinado cómo sabemos para qué elemento* mostrar los detalles: usando su atributo data.

*Voy a tener que utilizar la palabra “elemento” bastante a lo largo de este artículo. Esto es bastante molesto pero intentaré señalar si me estoy refiriendo a un elemento HTML o a un tipo de átomo a menos que sea obvio.

No mostraré todo el código fuente, sólo las partes relevantes para los atributos de datos. Los he utilizado varias veces durante este proyecto pero para evitar repeticiones sólo mostraré dónde realizamos las siguientes tareas: