Una guía completa de atributos de datos

Tabla de contenido

1. Introducción
2. Sintaxis
3. Estilo con atributos de datos
4. Acceder a atributos de datos en JavaScript

Introducción

Los elementos HTML pueden tener atributos que se utilizan para cualquier cosa, desde información de accesibilidad hasta control de estilo.

!-- We can use the `class` for styling in CSS, and we've also make this into a landmark region --div role="region" aria-label="Names"/div

Lo que no se recomienda es crear sus propios atributos o reutilizar atributos existentes para funciones no relacionadas.

!-- `highlight` is not an HTML attribute --div highlight="true"/div!-- `large` is not a valid value of `width` --div

Hay una variedad de razones por las que esto es malo. Su HTML deja de ser válido, lo que puede no tener consecuencias negativas reales, pero le roba esa cálida sensación de HTML válido y difuso. La razón más convincente es que HTML es un lenguaje vivo y sólo porque los atributos y valores que no hacen nada hoy no significa que nunca lo harán.

Sin embargo, hay buenas noticias: puedes crear tus propios atributos. ¡Solo necesitas agregarles el prefijo data-*y luego podrás hacer lo que quieras!

Sintaxis

Puede resultar muy útil poder crear sus propios atributos HTML y poner su propia información dentro de ellos. ¡Afortunadamente, puedes! Eso es exactamente lo que son los atributos de datos . Son así:

!-- They don't need a value --div data-foo/div!-- ...but they can have a value --div data-size="large"/div!-- You're in HTML here, so careful to escape code if you need to do something like put more HTML inside --li data-prefix="Careful with HTML in here."li!-- You can keep dashing if you like --aside data-some-long-attribute-nameaside

Los atributos de datos a menudo se denominan data-*atributos, ya que siempre tienen ese formato. La palabra data, luego un guión -y luego otro texto que puedas inventar.

¿Puedes usar el dataatributo solo?

div data=""/div

Probablemente no vaya a perjudicar nada, pero no obtendrá la API de JavaScript que cubriremos más adelante en esta guía. Básicamente, te estás inventando un atributo que, como mencioné en la introducción, no se recomienda.

Qué no hacer con los atributos de los datos

Almacene contenido que debería ser accesible. Si el contenido debe verse o leerse en una página, no solo los coloque en atributos de datos, sino que asegúrese de que el contenido esté en algún lugar del contenido HTML .

!-- This isn't accessible content --div data-name="Chris Coyier"/div!-- If you need programmatic access to it but shouldn't be seen, there are other ways... --div  spanChris Coyier/span/div

Aquí encontrará más información sobre cómo ocultar cosas.

Estilo con atributos de datos

CSS puede seleccionar elementos HTML según los atributos y sus valores.

/* Select any element with this data attribute and value */[data-size="large"] {  padding: 2rem;  font-size: 125%;}/* You can scope it to an element or class or anything else */button[data-type="download"] { }.card[data-pad="extra"] { }

Esto puede resultar convincente. Los ganchos de estilo predominantes en HTML/CSS son las clases, y si bien las clases son excelentes (tienen una especificidad media y buenos métodos de JavaScript a través de classList), un elemento las tiene o no (esencialmente activadas o desactivadas ). Con data-*los atributos, obtienes esa capacidad de activación/desactivación más la capacidad de seleccionar según el valor que tiene en el mismo nivel de especificidad.

/* Selects if the attribute is present at all */[data-size] { }/* Selects if the attribute has a particular value */[data-state="open"],[aria-expanded="true"] { }/* "Starts with" selector, meaning this would match "3" or anything starting with 3, like "3.14" */[data-version^="3"] { }/* "Contains" meaning if the value has the string anywhere inside it */[data-company*="google"] { }

La especificidad de los selectores de atributos.

Es exactamente lo mismo que una clase. A menudo pensamos en la especificidad como un valor de cuatro partes:

estilo en línea, ID, clases/atributos, etiquetas

Entonces, un selector de atributo único es 0, 0, 1, 0 . Un selector como este:

div.card[data-foo="bar"] { }

…sería 0, 0, 2, 1 . El 2 es porque hay una clase ( .card) y un atributo ( [data-foo="bar"]), y el 1 es porque hay una etiqueta ( div).

Los selectores de atributos tienen menos especificidad que un ID, más que un elemento/etiqueta y lo mismo que una clase.

Valores de atributos que no distinguen entre mayúsculas y minúsculas

En caso de que necesite corregir posibles inconsistencias en el uso de mayúsculas en sus atributos de datos, el selector de atributos tiene una variante que no distingue entre mayúsculas y minúsculas para eso.

/* Will matchdiv data-state="open"/divdiv data-state="Open"/divdiv data-state="OPEN"/divdiv data-state="oPeN"/div*/[data-state="open" i] { }

Es el pequeño identro del selector entre corchetes.

Usar atributos de datos visualmente

CSS le permite extraer el valor del atributo de datos y mostrarlo si es necesario.

/* div data-emoji="✅" */[data-emoji]::before {  content: attr(data-emoji); /* Returns '✅' */  margin-right: 5px;}

Ejemplo de caso de uso de estilo

Puede utilizar atributos de datos para especificar cuántas columnas desea que tenga un contenedor de cuadrícula.

div data-columns="2"/divdiv data-columns="3"/divdiv data-columns="4"/div

Acceder a atributos de datos en JavaScript

Como cualquier otro atributo, puedes acceder al valor con el método genérico getAttribute.

let value = el.getAttribute("data-state");// You can set the value as well.// Returns data-state="collapsed"el.setAttribute("data-state", "collapsed");

Pero los atributos de datos también tienen su propia API especial. Digamos que tiene un elemento con múltiples atributos de datos (lo cual está totalmente bien):

span   data-info="123"   data-index="2"   data-prefix="Dr. "  data-emoji-icon=" ️‍♀️"/span

Si tiene una referencia a ese elemento, puede establecer y obtener atributos como:

// Getspan.dataset.info; // 123span.dataset.index; // 2// Setspan.dataset.prefix = "Mr. ";span.dataset.emojiIcon = " ";

Tenga en cuenta el uso de camelCase en la última línea. Convierte automáticamente atributos de estilo kebab en HTML, como data-this-little-piggy, al estilo camelCase en JavaScript, como dataThisLittlePiggy.

Podría decirse que esta API no es tan buena como classListlos métodos clear add, remove, toggley replace, pero es mejor que nada.

También tiene acceso a conjuntos de datos en línea:

img src="spaceship.png"  data-ship-id="324" data-shields="72%" /img

Datos JSON dentro de atributos de datos

ul  li data-person='    {      "name": "Chris Coyier",      "job": "Web Person"    }  '/li/ul

Oye, ¿por qué no? Es solo una cadena y es posible formatearla como JSON válido (tenga en cuenta las comillas y demás). Puede extraer esos datos y analizarlos según sea necesario.

const el = document.querySelector("li");let json = el.dataset.person;let data = JSON.parse(json);console.log(data.name); // Chris Coyierconsole.log(data.job); // Web Person

Casos de uso de JavaScript

El concepto es que puede usar atributos de datos para colocar información en HTML a la que JavaScript puede necesitar acceso para hacer ciertas cosas.

Uno común tendría que ver con la funcionalidad de la base de datos. Digamos que tienes un botón “Me gusta”:

button data-id="435432343"♡/button

Ese botón podría tener un controlador de clic que realiza una solicitud Ajax al servidor para incrementar la cantidad de Me gusta en una base de datos al hacer clic. Sabe qué registro actualizar porque lo obtiene del atributo de datos.

Especificaciones

• Selectores Nivel 4 (Borrador de Trabajo)
• Selectores Nivel 3 (Recomendado)
• Selectores Nivel 2, Revisión 1 (Definición inicial)

Soporte del navegador

Estos datos de soporte del navegador son de Caniuse , que tiene más detalles. Un número indica que el navegador admite la función en esa versión y superiores.

Escritorio

Cromo	Firefox	ES DECIR	Borde	Safari
7	6	11	12	5.1

Móvil/Tableta

androidcromo	Android Firefox	Androide	Safari en iOS
125	126	3	5.0-5.1