Hva er tilpassede attributter i HTML?

Nedenfor er beskrivelsen av syntaks:

• element: Dette kan være et hvilket som helst HTML -element, for eksempel

  ,

  , eller mer.

• data-*: Dette er en tilpasset attributt, der "*" representerer attributtet.
• verdi: Dette kan være hvilken som helst strengverdi og må være i små bokstaver.

Hvordan lage tilpassede attributter i HTML?

Legg først til et divelement med klassenavnet "hovedinnhold”I HTML. Legg til en HTML

element for overskriften innenfor dette divelementet. Deretter, for å lage en uordnet liste, bruk HTML

stikkord. Spesifiser listeelementene ved å inkludere
• Tagger.

  Analysere kodebiten nedenfor der hver

• Element er assosiert med følgende attributter:
  • ved trykk: Dette er OnClick Event -attributtet og fungerer når elementet er klikket.
  • id: Denne attributtet setter en unik ID for elementene.
  • Dataklasse: Dette er den tilpassede attributtet, "data-”Angir dataattributtet og“Karakter”Er navnet på den tilpassede attributtet.

  “ved trykk”Attributt i hver

• elementet har en verdi “Showgrade (dette)”, Som er en funksjon. Denne funksjonen påberopes mens elementet er klikket. Nøkkelordet “dette”Brukes til å referere til et objekt. “id”Attributt angir en unik ID for hver
• element. Data attributtet “Dataklasse”Inneholder forskjellige verdier.

  Her er kodebiten som representerer det ovennevnte scenariet:

  
  

  Testkarakterer

  
  
  
  
  • 
    Lisa
    
  
  
  • 
    Jack
    
  
  
  • 
    Tusenfryd
    
  
  
  • 
    Jony
    
  
  
  
  

  La oss nå gå over til JavaScript -delen for å manipulere funksjonen som er spesifisert i OnClick -hendelsesattributtet.

  JavaScript

  • I den ovennevnte koden, "showgrade ()”Funksjon er definert med parameteren“ Student ”.
  • Neste, lag en variabel “Karakter”Og få attributtverdien ved å bruke“getAttribute ()”.
  • Etter det, genererer du en varselmelding for resultatet.

  Produksjon
  

  Hvordan få tilgang til de tilpassede attributtene ved hjelp av datasettegenskap?

  I samme HTML -kode, bruk datasetts nøkkelord og nevne det tilpassede attributtnavnet uten mellomrom mellom. For eksempel vil vi nevne det tilpassede attributtet "Data-laptop-type”Og legg til verdien etter behov:

  
  

  Programmerings språk

  
  
  
  
  • 
    Front End Development
    
  
  
  • 
    Lage webservere
    
  
  
  • 
    Dynamisk og interaktiv nett
    
  
  
  • 
    Utvikle nettlesere, operativsystemer
    
  
  
  
  

  JavaScript

  • “funksjon”Er nøkkelordet som brukes før funksjonen.
  • I den ovennevnte koden, "showgrade ()”Funksjon er definert med parameteren”laptop”.
  • Neste, lag en variabel “LaptopType”Og få den tilpassede attributtverdien ved å bruke“laptop.Datasett.LaptopType”.
  • Etter det, genererer du et varsel for å vise den hentede verdien av den tilsvarende tilpassede attributtet.

  Produksjon
  

  Hvordan style tilpassede attributter i CSS?

  Vi kan også bruke forskjellige CSS -stylingegenskaper på de tilpassede attributtene. For å få tilgang til dataattributtet i CSS, følg syntaks:

  element [data-*= 'verdi']
  CSS -egenskaper
  

  Endre bakgrunnen til hver av de tilpassede attributtene ved å bruke bakgrunnsfargen CSS-egenskapen.

  Stil “Data-laptop-type” med verdi “HTML/CSS”:

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

  Stil “Data-laptop-type” med verdi “JavaScript”

  li [data-laptop-type = 'javaScript']
  bakgrunnsfarge: RGB (158, 221, 240);
  

  Stil “Data-laptop-type” med verdi “PHP”

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

  Stil “Data-laptop-type” med verdi “C ++”

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

  Produksjon

  La oss gå videre for å style utseendet til HTML -siden.

  Stil “hovedinnhold” div

  .hovedinnhold
  Bredde: 600px;
  Høyde: 300px;
  Margin: Auto;
  

  “.hovedinnhold”Brukes for å få tilgang til DIV-elementet med klasse“ hovedinnhold ”. Følgende egenskaper brukes på det:

  • “bredde”Eiendom setter elementets bredde.
  • “høyde”Eiendom setter elementets høyde.
  • “margin”Eiendom gir plass rundt elementet.

  Stil “li” element

  .Hovedinnhold Li
  Font-størrelse: 25px;
  Margin: 2px;
  polstring: 5px;
  

  De

• Elementet er stylet med disse egenskapene:
  • “skriftstørrelse”Eiendom brukes til å sette elementets fontstørrelse.
  • “polstring”Eiendom setter plass rundt elementets innhold eller inne i elementets grense.

  Stil H2 -element

  H2
  Tekstdekorasjon: 5px Overline grønt;
  

  H2 -elementet brukes med "tekstdekorasjon”Eiendom med“5px" linje bredde, "Overlinje”Linjetype, og fargen”grønn”.

  Her er det siste blikket på websiden vår:

  Det handlet om å lage og bruke tilpassede attributter i HTML.

  Konklusjon

  I HTML legger tilpassede attributter ytterligere informasjon til HTML -elementene, spesifisert med prefikset "data-" som for eksempel "Dataklasse”. Brukeragenten ignorerer prefikset “data-”. Det er flere metoder for å få tilgang til de tilpassede attributtene i JavaScript, for eksempel getAttribute (), setAttribute (), datasett og mange flere. Denne oppskrivningen har gitt en omfattende guide for å opprette, få tilgang til, bruke og style tilpassede attributter i HTML.