Los atributos de datos personalizados le permiten agregar su propia información a las etiquetas en HTML. Aunque el nombre sugiere lo contrario, estos no son específicos de HTML5 y puede usar el atributo data-* en todos los elementos HTML.
Los atributos data-* se pueden usar para definir nuestros propios atributos de datos personalizados. Se utiliza para almacenar datos personalizados en privado a la página o aplicación.
Hay principalmente 2 partes de los atributos de datos:
- Nombre del atributo: debe tener al menos un carácter, no debe contener letras mayúsculas y debe tener el prefijo ‘datos-‘.
- Valor del atributo: puede ser cualquier string.
Sintaxis:
<li data-book-author="Rabindra Nath Tagore"> Gitanjali </li>
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(book) {
var bookauthor = book.getAttribute("data-book-author");
alert(book.innerHTML + " is written by "
+ bookauthor + ".");
}
</script>
</head>
<body>
<h1>Books</h1>
<p>Click on the book name to know author's name :</p>
<ul>
<li onclick="showDetails(this)" id="gitanjali"
data-book-author="Rabindra Nath Tagore">
Gitanjali
</li>
<li onclick="showDetails(this)" id="conquest_of_self"
data-book-author="Mahatma Gandhi">
Conquest of Self
</li>
<li onclick="showDetails(this)" id="broken_wings"
data-book-author="Sarojini Naidu">
Broken Wings
</li>
</ul>
</body>
</html>
Producción:
Cuando hacemos clic en el libro, podemos ver el nombre del autor en un cuadro de diálogo separado.
Navegadores compatibles: El navegador compatible con HTML | datos-* Atributo
están enlistados debajo:
- Google Chrome
- explorador de Internet
- Firefox
- Safari
- Ópera
Publicación traducida automáticamente
Artículo escrito por motamarriphani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA