Los atributos son información adicional que proporcionan los elementos HTML. Hay muchos atributos predefinidos en HTML.
Cuando los atributos predefinidos no tienen sentido para almacenar datos adicionales, los atributos personalizados permiten a los usuarios crear datos personalizados. Si desea definir sus propios atributos personalizados en HTML, puede implementarlos a través del formato data-* . * se puede reemplazar por cualquiera de sus nombres para especificar datos específicos para un elemento y orientarlo en CSS, JavaScript o jQuery. Hay algunas reglas a tener en cuenta antes de definir sus atributos personalizados.
- Debes definir tu atributo en minúsculas. Aunque algunos navegadores corrigen automáticamente los errores en el marcado, pueden causar errores y no son HTML5 válidos.
- No debe comenzar con XML (no distingue entre mayúsculas y minúsculas)
- No debe contener ningún carácter de dos puntos ( : ).
Cualquier elemento HTML ordinario puede volverse bastante complejo y personalizado a través del atributo data-* de HTML . Definamos una etiqueta de artículo simple en HTML para este artículo y almacenemos información adicional. Puede acceder a estos valores en JavaScript y CSS y usarlos de acuerdo con su propósito. Incluso puede definir nombres similares a etiquetas predefinidas. Un ID de datos de atributo personalizado es diferente de la etiqueta de identificación que se usa normalmente. Puede consolar los valores y probar eso.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: "red";
}
article[data-parent="GFG"] {
width: 1000px;
font-size: 50px;
color: green;
}
article[data-parent="GFG2"] {
width: 600px;
color: black;
font-size: 50px;
}
</style>
</head>
<body>
<article id="1"
data-title="custom-attributes"
data-parent="GFG">
Sample GFG article on Custom Attributes.
</article>
<article id="2"
data-title="custom-attributes-2"
data-parent="GFG2">
Sample GFG second article
on Custom Attributes.
</article>
<script>
const article = document.getElementById('1');
const article2 = document.getElementById('2');
// "custom-attributes"
console.log(article.dataset.title);
// "GFG"
console.log(article.dataset.parent);
// "custom-attributes-2"
console.log(article2.dataset.title);
// "GFG2"
console.log(article2.dataset.parent);
</script>
</body>
</html>
Producción:
atributos personalizados
Publicación traducida automáticamente
Artículo escrito por namankedia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA