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 incorporar los atributos de datos personalizados en 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.
Se aplica a
El contextmenu atributo es parte de los atributos globales , y se puede utilizar en cualquier elemento HTML.
| Elemento | Atributo |
|---|---|
| Todos los elementos HTML | data-* |
Ejemplo
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 " 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 |