Quali sono gli attributi personalizzati in HTML?

Di seguito è riportata la descrizione della sintassi:

• elemento: Questo potrebbe essere qualsiasi elemento HTML, come

  ,

  , o più.

• dati-*: Questo è un attributo personalizzato, in cui "*" rappresenta il nome dell'attributo.
• valore: Questo potrebbe essere qualsiasi valore di stringa e deve essere in lettere minuscole.

Come creare attributi personalizzati in HTML?

Innanzitutto, aggiungi un elemento div con il nome della classe "contenuto principale"In HTML. Aggiungi un HTML

Elemento per l'intestazione all'interno di questo elemento div. Quindi, per creare un elenco non ordinato, utilizzare l'HTML

etichetta. Specificare gli elementi dell'elenco includendo il
• tag.

  Analizzare lo snippet di codice seguente dove ciascuno

• L'elemento è associato ai seguenti attributi:
  • al clic: Questo è l'attributo evento OnClick e funziona quando si fa clic sull'elemento.
  • id: Questo attributo imposta un ID univoco per gli elementi.
  • grado di dati: Questo è l'attributo personalizzato, "dati-"Specifica l'attributo dei dati e"grado"È il nome dell'attributo personalizzato.

  IL "al clic"Attributo all'interno di ciascuno

• L'elemento ha un valore "Showgrade (questo)"Che è una funzione. Questa funzione viene invocata mentre viene cliccata l'elemento. La parola chiave "Questo"Viene utilizzato per fare riferimento a un oggetto. IL "id"Attributo imposta un ID univoco per ciascuno
• elemento. L'attributo dei dati "grado di dati"Contiene valori diversi.

  Ecco lo snippet di codice che rappresenta lo scenario sopra spiegato:

  
  

  Gradi di prova

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jack
    
  
  
  • 
    Margherita
    
  
  
  • 
    Jony
    
  
  
  
  

  Ora, andiamo alla parte JavaScript per manipolare la funzione specificata nell'attributo evento OnClick.

  JavaScript

  • Nel codice sopra indicato, il "showgrade ()"La funzione è definita con il parametro" Studente ".
  • Successivamente, crea una variabile "grado"E ottieni il valore dell'attributo utilizzando il"getAttribute ()".
  • Successivamente, genera un messaggio di avviso per il risultato.

  Produzione
  

  Come accedere agli attributi personalizzati utilizzando la proprietà del set di dati?

  Nello stesso codice HTML, utilizzare la parola chiave del set di dati e menzionare il nome dell'attributo personalizzato senza spazio tra. Ad esempio, menzioneremo l'attributo personalizzato "Data-laptop-type"E aggiungi il suo valore come richiesto:

  
  

  Linguaggi di programmazione

  
  
  
  
  • 
    Sviluppo front -end
    
  
  
  • 
    Fare server Web
    
  
  
  • 
    Web dinamico e interattivo
    
  
  
  • 
    Sviluppare browser, sistemi operativi
    
  
  
  
  

  JavaScript

  • IL "funzione"È la parola chiave utilizzata prima della funzione.
  • Nel codice sopra indicato, il "showgrade ()"La funzione è definita con il parametro"computer portatile".
  • Successivamente, crea una variabile "Laptoptype"E ottieni il valore dell'attributo personalizzato utilizzando il"computer portatile.set di dati.Laptoptype".
  • Successivamente, genera un avviso per visualizzare il valore recuperato dell'attributo personalizzato corrispondente.

  Produzione
  

  Come modellare gli attributi personalizzati in CSS?

  Possiamo anche applicare diverse proprietà di stile CSS agli attributi personalizzati. Per accedere all'attributo dati in CSS, seguire la sintassi:

  Element [data-*= 'Value']
  Proprietà CSS
  

  Ora, modifica lo sfondo di ciascuno degli attributi personalizzati utilizzando la proprietà CSS di colore in background.

  Stile "Data-laptop-type" con valore "HTML/CSS":

  li [data-laptop-type = 'html/css']
  Background-color: RGB (199, 158, 240);
  

  Stile "Data-Laptop-Type" con valore "JavaScript"

  li [data-laptop-type = 'javascript']
  Background-color: RGB (158, 221, 240);
  

  Stile "Data-laptop-type" con valore "PHP"

  li [data-laptop-type = 'php']
  Background-color: RGB (250, 161, 243);
  

  Stile "Data-laptop-type" con valore "C ++"

  li [data-laptop-type = 'c ++']
  Background-color: RGB (212, 248, 154);
  

  Produzione

  Spostamo oltre per modellare l'aspetto della pagina HTML.

  Stile "Main-Content" Div

  .contenuto principale
  larghezza: 600px;
  Altezza: 300px;
  Margine: auto;
  

  IL ".contenuto principale"Viene utilizzato per accedere all'elemento Div con la classe" Contempo ". Le seguenti proprietà sono applicate ad esso:

  • "larghezza"La proprietà imposta la larghezza dell'elemento.
  • "altezza"La proprietà imposta l'altezza dell'elemento.
  • "margine"La proprietà aggiunge spazio attorno all'elemento.

  Elemento "Li" di stile

  .contenuto principale li
  Font-size: 25px;
  Margine: 2px;
  imbottitura: 5px;
  

  IL

• L'elemento è disegnato con queste proprietà:
  • "dimensione del font"La proprietà viene utilizzata per l'impostazione delle dimensioni del carattere dell'elemento.
  • "imbottitura"La proprietà imposta spazio attorno al contenuto dell'elemento o all'interno del bordo dell'elemento.

  Stile Elemento H2

  H2
  Decisore del testo: 5px overline green;
  

  L'elemento H2 viene applicato con "decorazione del testo"Proprietà con il"5px" larghezza della linea, "overline"Tipo di linea e il colore"verde".

  Ecco lo sguardo finale alla nostra pagina web:

  Si trattava di creare e utilizzare attributi personalizzati in HTML.

  Conclusione

  In HTML, gli attributi personalizzati aggiungono ulteriori informazioni agli elementi HTML, specificati con il prefisso "dati-" ad esempio "grado di dati". L'agente utente ignora il prefisso "dati-". Esistono diversi metodi per accedere agli attributi personalizzati in JavaScript, come getAttribute (), setAttribute (), set di dati e molti altri. Questo articolo ha fornito una guida completa sulla creazione, l'accesso, l'uso e lo styling di attributi personalizzati in HTML.