Dette indlæg vil forklare brugen af dataattributter i JavaScript.
Hvordan bruger man dataattributter i JavaScript?
I JavaScript er ' data ”-attributter bruges til at gemme ekstra information, der ikke vises på websiden. Disse oplysninger kan skrives, tilgås, læses og ændres dynamisk i henhold til brugerens krav. Dette afsnit udførte den diskuterede opgave praktisk talt om dataattributter.
Syntaks
< element data -*= 'en vis værdi' >
I ovenstående syntaks:
- “ element ” repræsenterer HTML-elementet, hvori dataattributten bruges.
- “ data-* ” betegner de multiple(*) dataattributter, der starter med præfikset (data-), dvs. datanøgleord efterfulgt af en bindestreg.
- en vis værdi: Det angiver værdien af dataattributten.
Brug nu ovenstående syntaks til at oprette en dataattribut.
Opret dataattributter
< div id = 'myDiv' data - navn = 'Alvin' data - alder = '40' data - køn = 'han' > div >Den angivne HTML-kode på én linje skaber følgende ' data-navn ', ' data-alder ', og ' data-køn '-attributter inde i 'div'-elementet, hvis id er 'myDiv'.
Lad os læse/få adgang til de oprettede dataattributter.
Eksempel 1: Læs/adgang til dataattribut ved hjælp af egenskaben 'datasæt'.
Dette eksempel anvender egenskaben 'datasæt' til at læse/ få adgang til de specifikke eller alle dataattributter.
Først skal du se på ' knap ' element, der kalder ' jsFunc() 'når det er tilknyttet' onclick ” hændelse udløses ved knapklik:
< knap ved klik = 'jsFunc()' > Adgangsdataattribut knap >Gå nu videre til 'jsFunc()' definitionen:
< manuskript >funktion jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsol. log ( element. datasæt ) ;
}
manuskript >
I ovenstående kodelinjer:
- Det ' jsFunc() ' erklærer først en variabel 'elem', der anvender ' document.getElementById() ”-metoden for at få adgang til det tilføjede div-element via dets id “myDiv”.
- Dernæst bruger den ' console.log() ' metode, der vil bruge ' datasæt ” egenskab for at få adgang til dataattributterne for det tilgåede div-element og vise dem i webkonsollen.
Produktion
Tryk på F12 for at åbne webkonsollen:
Det kan ses, at når du klikker på den givne knap, viser konsollen et ' DOMStringMap ” indeholdende alle dataattributter for div-elementet.
Adgang til specifik værdi
Hvis brugeren ønsker at få adgang til den specifikke dataattribut, skal du angive dens navn med egenskaben 'datasæt' som denne:
< manuskript >funktion få ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsol. log ( element. datasæt . navn ) ;
}
manuskript >
På dette tidspunkt er der adgang til 'navn'-dataattributterne ved hjælp af ' datasæt ” ejendom.
Produktion
Det kan ses, at konsollen kun viser værdien af specificerede dataattributter ved knapklik.
Eksempel 2: Læs/adgang til dataattribut ved hjælp af 'getAttribute()'-metoden
Dette eksempel bruger metoden 'getAttribute()' til at læse/ få adgang til dataattributterne.
I dette scenarie er knapelementet i det første eksempel også inkluderet:
< knap ved klik = 'jsFunc()' > Adgangsdataattribut knap >Lad os se funktionaliteten af 'getAttribute()'-metoden:
< manuskript >funktion jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsol. log ( element. getAttribute ( 'data-navn' ) ) ;
konsol. log ( element. getAttribute ( 'data-alder' ) ) ;
konsol. log ( element. getAttribute ( 'data-køn' ) ) ;
}
manuskript >
I ovenstående kodestykke:
- Variablen 'elem' anvender ' document.getElementById() ”-metoden for at få adgang til det tilføjede div-element ved hjælp af dets id “myDiv”.
- Dernæst ' console.log() '-metoden bruger ' getAttribute() ”-metoden for at hente den angivne “data”-attributværdi for det hentede div-element og derefter vise det i webkonsollen.
- Den samme opgave udføres for at få adgang til de resterende specificerede dataattributter.
Bemærk: Metoden 'getAttribute()' specificerer dataattributten med præfikset 'data' efterfulgt af en bindestreg (-) dvs. (data-), som ikke kræver, mens du bruger 'dataset()' egenskaben.
Produktion
Ovenstående output viser alle de specificerede dataattributværdier ved knapklik.
Eksempel 3: Skriv en dataattribut ved hjælp af egenskaben 'datasæt'.
Dette eksempel skriver dataattributterne ved hjælp af egenskaben 'datasæt'.
Indholdet af knapelementet ændres i henhold til det aktuelle scenarie:
< knap ved klik = 'jsFunc()' > Skriv dataattribut knap >Skriv nu den nye dataattribut i det tilføjede div-element:
< manuskript >funktion jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. datasæt . id = 'person'
konsol. log ( element. datasæt ) ;
}
manuskript >
I ovenstående kodeblok:
- Det ' datasæt egenskaben skriver et nyt dataattributnavn 'id' med en specificeret strengværdi.
- Dernæst ' conolse.log() ' bruger egenskaben 'dataset' til at vise 'DOMStringMap'-grænsefladen, der indeholder den nyskrevne dataattribut i webkonsollen.
Produktion
Her viser konsollen 'DOMStringMap' indeholdende den nye dataattribut 'id' skrevet ved hjælp af 'dataset' egenskaben.
Eksempel 4: Opdater dataattributværdi
Dette eksempel opdaterer den eksisterende værdi af en specifik dataattribut ved hjælp af egenskaben 'datasæt'.
Knapelementets tekst ændres i henhold til det givne scenarie:
< knap ved klik = 'jsFunc()' > Opdater dataattribut knap >Gå nu videre til JavaScript-sektionen:
< manuskript >funktion jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. datasæt . navn = 'John'
konsol. log ( element. datasæt . navn ) ;
}
manuskript >
I ovenstående kodeblok opdateres den angivne 'navn' dataattributværdi ved hjælp af ' datasæt ” ejendom.
Produktion
Konsollen viser den opdaterede værdi af de angivne dataattributter ved knapklik.
Eksempel 5: Slet dataattribut
Dette eksempel sletter den specifikke dataattribut ved at bruge nøgleordet 'slet'.
Teksten i knapelementet ændres efter krav:
< knap ved klik = 'jsFunc()' > Slet dataattribut knap >Følg nu JavaScript-kodeblokken:
< manuskript >funktion jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
slette element. datasæt . alder ;
konsol. log ( element. datasæt . alder ) ;
}
manuskript >
Ovenstående kodestykke specificerer ' slette ” nøgleord med egenskaben “datasæt” for at slette den tilgåede dataattribut.
Produktion
Det er observeret, at konsollen viser ' udefineret ” på et knapklik, der tydeligt bekræfter, at den tilgåede dataattribut er blevet slettet.
Konklusion
I JavaScript kan dataattributterne bruges på forskellige måder såsom at læse, få adgang, skrive, opdatere og slette dem i henhold til kravene. Alle disse opgaver kan udføres ved hjælp af den indbyggede ' datasæt ” ejendom. Brugeren kan dog også få adgang til dataattributten en efter en ved hjælp af ' getAttribute() ” metode. Dette indlæg har praktisk forklaret brugen af dataattributter i JavaScript.