Ejemplo
Utilice el data-* atributo para incrustar datos personalizados:
<ul>
<li data-animal-type="bird">Owl</li>
<li
data-animal-type="fish">Salmon</li>
<li
data-animal-type="spider">Tarantula</li>
</ul>
Inténtalo tú mismo " Definición y Uso
El data-* atributos se utiliza para almacenar datos personalizados privado a la página o aplicación.
Los data-* atributos nos da la posibilidad de incrustar encargo data atributos de todos los elementos HTML.
Los datos almacenados (a medida), entonces se puede utilizar en la página de JavaScript para crear una experiencia de usuario más atractiva (sin ningún tipo de llamadas Ajax o consultas de bases de datos del lado del servidor).
Los data-* atributos constan de dos partes:
- El nombre del atributo no debe contener letras mayúsculas, y debe tener al menos un carácter mucho después de que el prefijo "data-"
- El valor del atributo puede ser cualquier cadena
Nota: Los atributos personalizados con el prefijo "data-" se ignora completamente por el agente de usuario.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el atributo.
| Atributo | |||||
|---|---|---|---|---|---|
| data-* | 4.0 | 5.5 | 2.0 | 3.1 | 9.6 |
Diferencias entre HTML 4.01 y HTML5
Los data-* atributos son nuevos en HTML5.
Sintaxis
<elementdata-*=" somevalue ">
Los valores de atributo
| Valor | Descripción |
|---|---|
| somevalue | Especifica el valor del atributo (como una cadena) |
Páginas relacionadas
HTML Tutorial: atributos HTML
HTML DOM Referencia: HTML DOM getAttribute() Método