Los atributos personalizados son atributos que no forman parte de los atributos estándar de HTML5 pero que se crean explícitamente. Nos permiten agregar nuestra propia información a las etiquetas HTML. Estos no son específicos y se pueden usar con todos los elementos HTML. La información adicional almacenada a través de atributos personalizados son datos que no necesitan tener ningún significado definido. Estos datos son privados para la página o aplicación. Los atributos personalizados también se conocen como atributos de datos .
Cualquier atributo cuyo nombre comience con data- es un atributo personalizado. Los atributos data-* nos permiten incrustar atributos personalizados en todos los elementos HTML. Estos son completamente ignorados por el agente de usuario. Los datos almacenados se pueden utilizar en JavaScript de la página. También podemos usar estos atributos de datos para diseñar nuestros elementos.
Sintaxis:
<element data-*="value">
Dos partes de los atributos personalizados:
- Nombre del atributo: el nombre del atributo debe tener al menos un carácter después del prefijo «datos-«. No debe contener letras mayúsculas.
- Valor del atributo : el valor que se almacenará puede ser cualquier string.
Ejemplo 1: En este ejemplo, leeremos los valores de estos atributos con JavaScript es bastante simple. De hecho, hay más de una forma de hacerlo. Una forma más sencilla es usar getAttribute() y setAttribute(). getAttribute() se puede usar para obtener los datos almacenados del atributo. Devolverá una string nula o vacía si el atributo solicitado no existe. setAttribute() se puede usar para modificar el valor de cualquier atributo existente o para agregar un nuevo atributo.
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html> <head> <title>GeeksForGeeks</title> </head> <body> <h3>Welcome To GFG</h3> <ul> <li onclick="showPosition(this)" id="geek1" data-position="winner"> Geek1 </li> <li onclick="showPosition(this)" id="geek2" data-position="runner up"> Geek2 </li> <li onclick="showPosition(this)" id="geek3" data-position="third"> Geek3 </li> <li onclick="showPosition(this)" id="geek4" data-position="lost"> Geek4 </li> </ul> <script src="custom_attributes.js"></script> </body> </html>
custom_attributes.js: este archivo JavaScript manejará los atributos personalizados a los que se accederá mediante getAttribute(). Usaremos esto para crear una alerta cada vez que se haga clic en un elemento de la lista. El código JavaScript se ve así:
Javascript
function showPosition(runner) {
var position = runner.getAttribute("data-position");
alert("The " + runner.innerHTML + " is " + position + ".");
}
Producción:
Pantalla de salida
Ejemplo 2: En este ejemplo, veremos otra forma de acceder a los atributos de los datos mediante el uso de la propiedad del conjunto de datos . Esta propiedad devuelve un objeto DOMStringMap con una entrada para cada atributo de datos personalizado. Una clave DOMStringMap es una forma transformada de atributo de datos personalizados. El prefijo «datos-» se elimina del nombre del atributo. También se elimina cualquier guión en el nombre. De esta forma, obtenemos un nombre camelCase. Luego se puede acceder a los atributos usando el nombre camelCase almacenado en el objeto como una clave como element.dataset.keyname o element.dataset[keyname]. Tomaremos listas de alimentos. Los atributos personalizados contendrán tipo de comida. El atributo onclick activará JavaScript cuando se haga clic en un elemento.
HTML
<!DOCTYPE html> <html> <head> <title>GeeksForGeeks</title> </head> <body> <h3>Welcome To GFG</h3> <ul> <li onclick="handleFood(this)" data-food-type="fruit"> Apple </li> <li onclick="handleFood(this)" data-food-type="vegitable"> Potato </li> <li onclick="handleFood(this)" data-food-type="veg"> Cabbage </li> <li onclick="handleFood(this)" data-food-type="non-veg"> Chicken </li> </ul> <script src="custom_attributes.js"></script> </body> </html>
custom_attributes.js: siempre que se haga clic en un elemento, se activará este fragmento de código. Aquí alertaremos sobre el tipo de comida que se almacena en el atributo personalizado usando la propiedad del conjunto de datos. El fragmento de código se ve así:
Javascript
function handleFood(food) {
var foodType = food.dataset.foodType;
alert(food.innerHTML + " is " + foodType +".");
}
Producción:
Pantalla de salida
Ejemplo 3: En este ejemplo, estableceremos los colores de fondo de los elementos utilizando el acceso CSS que acabamos de ver. Como los atributos personalizados son atributos HTML sin formato, se puede acceder a ellos desde CSS. Por ejemplo, podemos usar selectores de atributos para diseñar el color de fondo del elemento.
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="styles.css"> </head> <body> <h2>Welcome To GFG</h2> <p data-about="blog">Informational text entries</p> <p data-info="blogathon">Blogathon 2021</p> </body> </html>
styles.css: seleccione los elementos en el archivo styles.css y configure el color de fondo de los elementos usando las propiedades estándar de CSS.
CSS
p[data-about='blog'] {
background-color: #C2F784;
}
p[data-info='blogathon'] {
background-color: #DF2E2E;
}
Producción:
Pantalla de salida
Publicación traducida automáticamente
Artículo escrito por sandeepkrsuman y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA