Det här inlägget kommer att förklara användningen av dataattribut i JavaScript.
Hur använder man dataattribut i JavaScript?
I JavaScript är ' data ”-attribut används för att lagra extra information som inte visas på webbsidan. Denna information kan skrivas, kommas åt, läsas och ändras dynamiskt enligt användarens krav. Detta avsnitt utförde den diskuterade uppgiften praktiskt taget om dataattribut.
Syntax
< elementdata -*= 'något värde' >
I ovanstående syntax:
- ' element ” representerar HTML-elementet där dataattributet används.
- ' data-* ” betecknar de multipla(*) dataattributen som börjar med prefixet (data-), dvs datanyckelordet följt av ett bindestreck.
- något värde: Den anger värdet på dataattributet.
Använd nu ovanstående syntax för att skapa ett dataattribut.
Skapa dataattribut
< div id = 'myDiv' data - namn = 'Alvin' data - ålder = '40' data - kön = 'manlig' > div >Den angivna enrads HTML-koden skapar följande ' datanamn ”, “ dataålder ', och den ' data-kön '-attribut inuti 'div'-elementet vars id är 'myDiv'.
Låt oss läsa/få åtkomst till de skapade dataattributen.
Exempel 1: Läs/åtkomstdataattribut med 'dataset'-egenskap
Det här exemplet tillämpar egenskapen 'dataset' för att läsa/åtkomst till specifika eller alla dataattribut.
Titta först på ' knapp ' element som anropar ' jsFunc() ' när det är associerat ' onclick ” händelse utlöses vid knappklick:
< knappen när du klickar = 'jsFunc()' > Åtkomstdataattribut knapp >Gå nu vidare till 'jsFunc()'-definitionen:
< manus >funktion jsFunc ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
trösta. logga ( element. dataset ) ;
}
manus >
I ovanstående kodrader:
- den ' jsFunc() ' deklarerar först en variabel 'elem' som tillämpar ' document.getElementById() ”-metoden för att komma åt det tillagda div-elementet via dess id “myDiv”.
- Därefter använder den ' console.log() ' metod som kommer att använda ' dataset ”-egenskapen för att komma åt dataattributen för det åtkomliga div-elementet och visa dem i webbkonsolen.
Produktion
Tryck på F12 för att öppna webbkonsolen:
Det kan ses att när du klickar på den givna knappen visar konsolen en ' DOMStringMap ” som innehåller alla dataattribut för div-elementet.
Få åtkomst till specifikt värde
Om användaren vill komma åt det specifika dataattributet anger du dess namn med egenskapen 'dataset' så här:
< manus >funktion få ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
trösta. logga ( element. dataset . namn ) ;
}
manus >
För närvarande nås dataattributen 'namn' med hjälp av ' dataset ' fast egendom.
Produktion
Det kan ses att konsolen endast visar värdet av specificerade dataattribut vid knappklick.
Exempel 2: Läs/åtkomstdataattribut Användning av metoden “getAttribute()”.
Det här exemplet använder metoden 'getAttribute()' för att läsa/åtkomst till dataattributen.
I det här scenariot ingår även knappelementet i det första exemplet:
< knappen när du klickar = 'jsFunc()' > Åtkomstdataattribut knapp >Låt oss se funktionen för metoden 'getAttribute()':
< manus >funktion jsFunc ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
trösta. logga ( element. getAttribute ( 'data-namn' ) ) ;
trösta. logga ( element. getAttribute ( 'dataålder' ) ) ;
trösta. logga ( element. getAttribute ( 'data-kön' ) ) ;
}
manus >
I kodavsnittet ovan:
- Variabeln 'elem' tillämpar ' document.getElementById() ”-metoden för att komma åt det tillagda div-elementet med dess id “myDiv”.
- Därefter ' console.log() ”-metoden använder ” getAttribute() ”-metoden för att hämta det angivna ”data”-attributvärdet för det hämtade div-elementet och sedan visa det i webbkonsolen.
- Samma uppgift utförs för att komma åt de återstående specificerade dataattributen.
Notera: Metoden 'getAttribute()' specificerar dataattributet med prefixet 'data' följt av ett bindestreck (-) dvs (data-) som inte kräver när du använder egenskapen 'dataset()'.
Produktion
Ovanstående utdata visar alla specificerade dataattributvärden vid knappklick.
Exempel 3: Skriv ett dataattribut med hjälp av egenskapen 'dataset'.
Det här exemplet skriver dataattributen med 'dataset'-egenskapen.
Innehållet i knappelementet ändras enligt det aktuella scenariot:
< knappen när du klickar = 'jsFunc()' > Skriv dataattribut knapp >Skriv nu det nya dataattributet i det tillagda div-elementet:
< manus >funktion jsFunc ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
element. dataset . id = 'person'
trösta. logga ( element. dataset ) ;
}
manus >
I ovanstående kodblock:
- den ' dataset ' egenskapen skriver ett nytt dataattributnamn 'id' med ett specificerat strängvärde.
- Därefter ' conolse.log() ' använder egenskapen 'dataset' för att visa gränssnittet 'DOMStringMap' som innehåller det nyskrivna dataattributet i webbkonsolen.
Produktion
Här visar konsolen 'DOMStringMap' som innehåller det nya dataattributet 'id' skrivet med egenskapen 'dataset'.
Exempel 4: Uppdatera dataattributvärde
Det här exemplet uppdaterar det befintliga värdet för ett specifikt dataattribut med hjälp av egenskapen 'dataset'.
Knappelementets text ändras enligt det givna scenariot:
< knappen när du klickar = 'jsFunc()' > Uppdatera dataattribut knapp >Gå nu vidare till JavaScript-avsnittet:
< manus >funktion jsFunc ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
element. dataset . namn = 'John'
trösta. logga ( element. dataset . namn ) ;
}
manus >
I kodblocket ovan uppdateras det angivna 'namn' dataattributvärdet med hjälp av ' dataset ' fast egendom.
Produktion
Konsolen visar det uppdaterade värdet för de angivna dataattributen vid knappklick.
Exempel 5: Ta bort dataattribut
Det här exemplet tar bort det specifika dataattributet genom att använda nyckelordet 'delete'.
Texten i knappelementet ändras enligt kravet:
< knappen när du klickar = 'jsFunc()' > Ta bort dataattribut knapp >Följ nu JavaScript-kodblocket:
< manus >funktion jsFunc ( ) {
konst element = dokumentera. getElementById ( 'myDiv' ) ;
ta bort element. dataset . ålder ;
trösta. logga ( element. dataset . ålder ) ;
}
manus >
Ovanstående kodavsnitt anger ' radera ' nyckelord med egenskapen 'dataset' för att ta bort åtkomstdataattributet.
Produktion
Det observeras att konsolen visar ' odefinierad ” på ett knappklick som tydligt verifierar att åtkomstdataattributet har raderats.
Slutsats
I JavaScript kan dataattributen användas på olika sätt som att läsa, komma åt, skriva, uppdatera och ta bort dem enligt kraven. Alla dessa uppgifter kan utföras med hjälp av den inbyggda ' dataset ' fast egendom. Användaren kan dock också komma åt dataattributet en efter en med hjälp av ' getAttribute() 'metoden. Det här inlägget har praktiskt förklarat användningen av dataattribut i JavaScript.