HTML
Atributos de datos
Buscar..
Sintaxis
<element data-custom-name="somevalue">
Parámetros
Valor | Descripción |
---|---|
algún valor | Especifica el valor del atributo (como una cadena) |
Uso de atributos de datos
Los atributos de data-*
HTML5 proporcionan una manera conveniente de almacenar datos en elementos HTML. Los datos almacenados se pueden leer o modificar usando JavaScript
<div data-submitted="yes" class="user_profile">
… some content …
</div>
La estructura del atributo de
data-*
esdata-*
, es decir, el nombre del atributo de datos viene después de la parte dedata-
. Usando este nombre, se puede acceder al atributo.Los datos en formato de cadena (incluido
json
) se pueden almacenar utilizando el atributodata-*
.
Soporte de navegadores antiguos
Los atributos de datos se introdujeron en HTML5, que es compatible con todos los navegadores modernos, pero los navegadores más antiguos antes de HTML5 no reconocen los atributos de datos.
Sin embargo, en las especificaciones HTML, los atributos que no son reconocidos por el navegador deben dejarse solos y el navegador simplemente los ignorará al renderizar la página.
Los desarrolladores web han utilizado este hecho para crear atributos no estándar que son atributos que no forman parte de las especificaciones HTML. Por ejemplo, el atributo de value
en la línea siguiente se considera un atributo no estándar porque las especificaciones para la etiqueta <img>
no tienen un atributo de value
y no es un atributo global:
<img src="sample.jpg" value="test" />
Esto significa que aunque los atributos de datos no son compatibles con los navegadores más antiguos, siguen funcionando y puede configurarlos y recuperarlos utilizando los mismos métodos genéricos de setAttribute
y getAttribute
setAttribute
JavaScript, pero no puede usar la nueva propiedad de dataset
que solo se admite en los navegadores modernos.