Dette innlegget vil forklare bruken av dataattributter i JavaScript.
Hvordan bruke dataattributter i JavaScript?
I JavaScript er ' data ”-attributter brukes til å lagre ekstra informasjon som ikke vises på nettsiden. Denne informasjonen kan skrives, åpnes, leses og endres dynamisk i henhold til brukerens krav. Denne delen utførte den diskuterte oppgaven praktisk talt på dataattributter.
Syntaks
< elementdata -*= 'en verdi' >
I syntaksen ovenfor:
- ' element ” representerer HTML-elementet som dataattributtet brukes i.
- ' data-* ” angir de multiple(*) dataattributtene som starter med prefikset (data-), dvs. datanøkkelord etterfulgt av en bindestrek.
- noen verdi: Den spesifiserer verdien av dataattributtet.
Bruk nå syntaksen ovenfor for å lage et dataattributt.
Opprett dataattributter
< div id = 'myDiv' data - Navn = 'Alvin' data - alder = '40' data - kjønn = 'mannlig' > div >Den oppgitte enlinjes HTML-koden lager følgende ' datanavn ', ' data-alder ', og ' data-kjønn '-attributter inne i 'div'-elementet hvis id er 'myDiv'.
La oss lese/få tilgang til de opprettede dataattributtene.
Eksempel 1: Les/tilgang dataattributt ved bruk av 'dataset'-egenskap
Dette eksemplet bruker «dataset»-egenskapen for å lese/få tilgang til de spesifikke eller alle dataattributtene.
Se først på ' knapp ' element som kaller ' jsFunc() ' når det er tilknyttet ' ved trykk '-hendelsen utløses ved knappeklikk:
< knappen ved å klikke = 'jsFunc()' > Tilgangsdataattributt knapp >Gå nå videre til 'jsFunc()'-definisjonen:
< manus >funksjon jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsoll. Logg ( element. datasett ) ;
}
manus >
I kodelinjene ovenfor:
- « jsFunc() ' erklærer først en variabel 'elem' som bruker ' document.getElementById() ”-metoden for å få tilgang til det tillagte div-elementet via dets id “myDiv”.
- Deretter bruker den ' console.log() ' metode som vil bruke ' datasett ”-egenskapen for å få tilgang til dataattributtene til det åpnede div-elementet og vise dem i nettkonsollen.
Produksjon
Trykk F12 for å åpne nettkonsollen:
Det kan sees at når du klikker på den gitte knappen, viser konsollen en ' DOMStringMap ” som inneholder alle dataattributtene til div-elementet.
Tilgang spesifikk verdi
Hvis brukeren ønsker å få tilgang til det spesifikke dataattributtet, spesifiser navnet med 'dataset'-egenskapen slik:
< manus >funksjon få ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsoll. Logg ( element. datasett . Navn ) ;
}
manus >
På dette tidspunktet får du tilgang til 'navn'-dataattributtene ved å bruke ' datasett ' eiendom.
Produksjon
Det kan sees at konsollen kun viser verdien av spesifiserte dataattributter ved knappeklikk.
Eksempel 2: Les/tilgang dataattributt ved å bruke “getAttribute()”-metoden
Dette eksemplet bruker 'getAttribute()'-metoden for å lese/få tilgang til dataattributtene.
I dette scenariet er knappeelementet i det første eksemplet også inkludert:
< knappen ved å klikke = 'jsFunc()' > Tilgangsdataattributt knapp >La oss se funksjonaliteten til 'getAttribute()'-metoden:
< manus >funksjon jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
konsoll. Logg ( element. getAttribute ( 'data-navn' ) ) ;
konsoll. Logg ( element. getAttribute ( 'data-alder' ) ) ;
konsoll. Logg ( element. getAttribute ( 'data-kjønn' ) ) ;
}
manus >
I kodebiten ovenfor:
- 'elem'-variabelen bruker ' document.getElementById() ”-metoden for å få tilgang til det tillagte div-elementet ved å bruke dets id “myDiv”.
- Deretter ' console.log() '-metoden bruker ' getAttribute() ”-metoden for å få den spesifiserte “data”-attributtverdien til det hentede div-elementet og deretter vise det i nettkonsollen.
- Den samme oppgaven utføres for å få tilgang til de gjenværende spesifiserte dataattributtene.
Merk: “getAttribute()”-metoden spesifiserer dataattributtet med prefikset “data” etterfulgt av en bindestrek(-) dvs. (data-) som ikke krever mens du bruker “dataset()”-egenskapen.
Produksjon
Utdataene ovenfor viser alle de spesifiserte dataattributtverdiene ved knappeklikk.
Eksempel 3: Skriv et dataattributt ved å bruke 'dataset'-egenskapen
Dette eksemplet skriver dataattributtene ved å bruke 'dataset'-egenskapen.
Innholdet i knappeelementet endres i henhold til gjeldende scenario:
< knappen ved å klikke = 'jsFunc()' > Skriv dataattributt knapp >Skriv nå det nye dataattributtet i det lagt til div-elementet:
< manus >funksjon jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. datasett . id = 'person'
konsoll. Logg ( element. datasett ) ;
}
manus >
I kodeblokken ovenfor:
- « datasett ' egenskap skriver et nytt dataattributtnavn 'id' med en spesifisert strengverdi.
- Deretter ' conolse.log() ' bruker 'dataset'-egenskapen for å vise 'DOMStringMap'-grensesnittet som inneholder det nyskrevne dataattributtet i nettkonsollen.
Produksjon
Her viser konsollen 'DOMStringMap' som inneholder det nye dataattributtet 'id' skrevet med 'dataset'-egenskapen.
Eksempel 4: Oppdater dataattributtverdi
Dette eksemplet oppdaterer den eksisterende verdien til et spesifikt dataattributt ved hjelp av 'dataset'-egenskapen.
Knappeelementets tekst endres i henhold til det gitte scenariet:
< knappen ved å klikke = 'jsFunc()' > Oppdater dataattributt knapp >Gå nå videre til JavaScript-delen:
< manus >funksjon jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
element. datasett . Navn = 'John'
konsoll. Logg ( element. datasett . Navn ) ;
}
manus >
I kodeblokken ovenfor oppdateres den angitte 'navn' dataattributtverdien ved hjelp av ' datasett ' eiendom.
Produksjon
Konsollen viser den oppdaterte verdien av de spesifiserte dataattributtene ved knappeklikk.
Eksempel 5: Slett dataattributt
Dette eksemplet sletter det spesifikke dataattributtet ved å bruke nøkkelordet 'slett'.
Teksten til knappeelementet endres i henhold til kravet:
< knappen ved å klikke = 'jsFunc()' > Slett dataattributt knapp >Følg nå JavaScript-kodeblokken:
< manus >funksjon jsFunc ( ) {
konst element = dokument. getElementById ( 'myDiv' ) ;
slette element. datasett . alder ;
konsoll. Logg ( element. datasett . alder ) ;
}
manus >
Kodebiten ovenfor spesifiserer ' slette ' nøkkelord med 'dataset'-egenskapen for å slette attributtet for tilgang til data.
Produksjon
Det er observert at konsollen viser ' udefinert ” på et knappeklikk som tydelig bekrefter at attributtet for tilgang til data er slettet.
Konklusjon
I JavaScript kan dataattributtene brukes på ulike måter som å lese, få tilgang til, skrive, oppdatere og slette dem i henhold til kravene. Alle disse oppgavene kan utføres ved hjelp av den innebygde ' datasett ' eiendom. Imidlertid kan brukeren også få tilgang til dataattributtet en etter en ved hjelp av ' getAttribute() 'metoden. Dette innlegget har praktisk forklart bruken av dataattributter i JavaScript.