¿Cuáles son los atributos personalizados en HTML??

A continuación se muestra la descripción de la sintaxis:

• elemento: Este podría ser cualquier elemento HTML, como

  ,

  , o más.

• datos-*: Este es un atributo personalizado, donde "*" representa el nombre del atributo.
• valor: Esto podría ser cualquier valor de cadena y debe estar en letras minúsculas.

Cómo crear atributos personalizados en HTML?

Primero, agregue un elemento Div con el nombre de la clase "contenido principal"En html. Agregar un HTML

elemento para el encabezado dentro de este elemento div. Luego, para hacer una lista desordenada, utilice el HTML

etiqueta. Especifique los elementos de la lista incluyendo el
• etiquetas.

  Analice el siguiente fragmento de código donde cada uno

• El elemento está asociado con los siguientes atributos:
  • al hacer clic: Este es el atributo de evento OnClick y funciona cuando se hace clic en el elemento.
  • identificación: Este atributo establece una identificación única para los elementos.
  • de grado de datos: Este es el atributo personalizado ","datos-"Especifica el atributo de datos y"calificación"Es el nombre del atributo personalizado.

  El "al hacer clic"Atributo dentro de cada

• El elemento tiene un valor "showgrade (esto)", Que es una función. Esta función se invoca mientras se hace clic en el elemento. La palabra clave "este"Se utiliza para referirse a un objeto. El "identificación"El atributo establece una identificación única para cada
• elemento. El atributo de datos "de grado de datos"Contiene diferentes valores.

  Aquí está el fragmento de código que representa el escenario anterior explicado:

  
  

  Calificaciones de prueba

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jacobo
    
  
  
  • 
    Margarita
    
  
  
  • 
    Jony
    
  
  
  
  

  Ahora, vayamos a la parte de JavaScript para manipular la función especificada en el atributo de evento OnClick.

  Javascript

  • En el código indicado anteriormente, el "showgrade ()"La función se define con el parámetro" Estudiante ".
  • A continuación, cree una variable "calificación"Y obtenga el valor del atributo utilizando el"getAttribute ()".
  • Después de eso, genere un mensaje de alerta para el resultado.

  Producción
  

  Cómo acceder a los atributos personalizados utilizando la propiedad del conjunto de datos?

  En el mismo código HTML, utilice la palabra clave del conjunto de datos y mencione el nombre de atributo personalizado sin espacio entre. Por ejemplo, mencionaremos el atributo personalizado "Tipo de la computadora portátil de datos"Y agregue su valor según sea necesario:

  
  

  Lenguajes de programación

  
  
  
  
  • 
    Desarrollo frontal
    
  
  
  • 
    Hacer servidores web
    
  
  
  • 
    Web dinámica e interactiva
    
  
  
  • 
    Desarrollar navegadores, sistemas operativos
    
  
  
  
  

  Javascript

  • El "función"¿Se utiliza la palabra clave antes de la función.
  • En el código indicado anteriormente, el "showgrade ()"La función se define con el parámetro"computadora portátil".
  • A continuación, cree una variable "Paptaptype"Y obtenga el valor de atributo personalizado utilizando el"computadora portátil.conjunto de datos.Paptaptype".
  • Después de eso, genere una alerta para mostrar el valor recuperado del atributo personalizado correspondiente.

  Producción
  

  Cómo diseñar atributos personalizados en CSS?

  También podemos aplicar diferentes propiedades de estilo CSS a los atributos personalizados. Para acceder al atributo de datos en CSS, siga la sintaxis:

  elemento [data-*= 'valor']
  Propiedades CSS
  

  Ahora, cambie el fondo de cada uno de los atributos personalizados utilizando la propiedad CSS de color de fondo.

  Estilo "DataSaptop-Type" que tiene valor "HTML/CSS":

  Li [DataSaptop-type = 'html/css']
  Color de fondo: RGB (199, 158, 240);
  

  Estilo "Tipo de la computadora portátil de datos" que tiene valor "JavaScript"

  Li [DataSaptop-type = 'JavaScript']
  Color de fondo: RGB (158, 221, 240);
  

  Estilo "Tipo de la computadora portátil de datos" que tiene valor "PHP"

  Li [DataSaptop-type = 'Php']
  Color de fondo: RGB (250, 161, 243);
  

  Estilo "Tipo de la computadora portátil de datos" que tiene valor "C ++"

  Li [DataSaptop-type = 'C ++']
  Color de fondo: RGB (212, 248, 154);
  

  Producción

  Moviemos más para diseñar el aspecto de la página HTML.

  Estilo "Contente principal" Div

  .contenido principal
  Ancho: 600px;
  Altura: 300px;
  margen: auto;
  

  El ".contenido principal"Se utiliza para acceder al elemento div que tiene clase" contenido principal ". Se aplican las siguientes propiedades:

  • "ancho"La propiedad establece el ancho del elemento.
  • "altura"La propiedad establece la altura del elemento.
  • "margen"La propiedad agrega espacio alrededor del elemento.

  Elemento de estilo "Li"

  .Contente principal Li
  tamaño de fuente: 25px;
  margen: 2px;
  relleno: 5px;
  

  El

• El elemento se diseña con estas propiedades:
  • "tamaño de fuenteSe utiliza la propiedad para establecer el tamaño de fuente del elemento.
  • "relleno"La propiedad establece espacio alrededor del contenido del elemento o dentro del borde del elemento.

  Elemento de estilo H2

  H2
  Decoración de texto: 5px sobreventa verde;
  

  El elemento H2 se aplica con el "decoración de texto"Propiedad con el"5px" ancho de línea, "exceso"Tipo de línea y el color"verde".

  Aquí está el aspecto final a nuestra página web:

  Eso se trataba de crear y usar atributos personalizados en HTML.

  Conclusión

  En HTML, los atributos personalizados agregan información adicional a los elementos HTML, especificados con el prefijo "datos-" como "de grado de datos". El agente de usuario ignora el prefijo "datos-". Existen varios métodos para acceder a los atributos personalizados en JavaScript, como getAttribute (), setattribute (), conjunto de datos y muchos más. Este artículo ha proporcionado una guía completa sobre cómo crear, acceder, usar y diseñar atributos personalizados en HTML.