Kuinka käyttää dataattribuutteja JavaScriptissä?

Kuinka Kayttaa Dataattribuutteja Javascriptissa



Dataattribuutit auttavat datapisteiden tallentamisessa vakio-HTML-elementtiin. Ne eivät ole sisäänrakennettuja attribuutteja, mutta käyttäjä voi luoda ne 'data-'-etuliitteellä. Käyttäjä voi luoda useita tietomääritteitä määritetylle HTML-elementille. Kun nämä mukautetut tietomääritteet on luotu, käyttäjä voi suorittaa niille erilaisia ​​toimintoja, kuten kirjoittaa, lukea, muuttaa, poistaa ja paljon muuta.

Tämä viesti selittää dataattribuuttien käytön JavaScriptissä.

Kuinka käyttää dataattribuutteja JavaScriptissä?

JavaScriptissä ' tiedot ” -attribuutteja käytetään lisätietojen tallentamiseen, jotka eivät näy verkkosivulla. Näitä tietoja voidaan kirjoittaa, käyttää, lukea ja muuttaa dynaamisesti käyttäjän vaatimusten mukaan. Tämä osio suoritti käsitellyn tehtävän käytännössä tietomääritteillä.







Syntaksi



< elementtitiedot -*= 'jotain arvoa' >

Yllä olevassa syntaksissa:



  • ' elementti ” edustaa HTML-elementtiä, jossa dataattribuuttia käytetään.
  • ' data-* ” tarkoittaa useita (*) tietomääritteitä, jotka alkavat etuliitteellä (data-) eli data-avainsanalla, jota seuraa yhdysmerkki.
  • jokin arvo: Se määrittää data-attribuutin arvon.

Luo nyt dataattribuutti yllä olevan syntaksin avulla.





Luo tietomääritteitä

< div id = 'myDiv' tiedot - nimi = 'Alvin' tiedot - ikä = '40' tiedot - sukupuoli = 'Uros' > div >

Ilmoitettu yksirivinen HTML-koodi luo seuraavan ' data-nimi ”, “ data-ikä ', ja ' data-sukupuoli ” attribuutteja ”div”-elementin sisällä, jonka tunnus on ”myDiv”.

Luemme/käytämme luotuja tietomääritteitä.



Esimerkki 1: Lue/ käytä tietomääritettä 'dataset'-ominaisuuden avulla

Tämä esimerkki käyttää 'dataset'-ominaisuutta tiettyjen tai kaikkien tietomääritteiden lukemiseen/käyttöön.

Katso ensin ' -painiketta '-elementti, joka kutsuu ' jsFunc() 'kun se liittyy' klikkaamalla ” tapahtuma käynnistyy painikkeen napsautuksella:

< painiketta onclick = 'jsFunc()' > Access Data Attribuutti -painiketta >

Siirry nyt 'jsFunc()' -määritykseen:

< käsikirjoitus >

funktio jsFunc ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

konsoli. Hirsi ( elementti. tietojoukko ) ;

}

käsikirjoitus >

Yllä olevilla koodiriveillä:

  • ' jsFunc() ' ilmoittaa ensin muuttujan 'elem', joka soveltaa ' document.getElementById() ' -menetelmää päästäksesi lisättyyn div-elementtiin sen tunnuksen 'myDiv' kautta.
  • Seuraavaksi se käyttää ' console.log() menetelmää, joka käyttää tietojoukko ” -ominaisuutta päästäksesi käsiksi käytetyn div-elementin tietomääritteisiin ja näyttämään ne verkkokonsolissa.

Lähtö

Avaa verkkokonsoli painamalla F12:

Voidaan nähdä, että kun napsautat annettua painiketta, konsoli näyttää ' DOMStringMap ” sisältää kaikki div-elementin tietoattribuutit.

Käytä erityistä arvoa

Jos käyttäjä haluaa käyttää tiettyä tietomääritettä, määritä sen nimi 'dataset'-ominaisuuden avulla seuraavasti:

< käsikirjoitus >

toiminto saada ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

konsoli. Hirsi ( elementti. tietojoukko . nimi ) ;

}

käsikirjoitus >

Tällä hetkellä 'nimi'-dataattribuutteja käytetään ' tietojoukko ” omaisuutta.

Lähtö

Voidaan nähdä, että konsoli näyttää vain määritettyjen tietomääritteiden arvon painiketta napsauttamalla.

Esimerkki 2: Lue/ käytä dataattribuuttia 'getAttribute()'-menetelmällä

Tässä esimerkissä käytetään 'getAttribute()'-menetelmää dataattribuuttien lukemiseen/käyttämiseen.

Tässä skenaariossa ensimmäisen esimerkin painikeelementti sisältyy myös:

< painiketta onclick = 'jsFunc()' > Access Data Attribuutti -painiketta >

Katsotaanpa getAttribute()-menetelmän toimintoja:

< käsikirjoitus >

funktio jsFunc ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

konsoli. Hirsi ( elementti. getAttribute ( 'data-nimi' ) ) ;

konsoli. Hirsi ( elementti. getAttribute ( 'data-ikä' ) ) ;

konsoli. Hirsi ( elementti. getAttribute ( 'data-sukupuoli' ) ) ;

}

käsikirjoitus >

Yllä olevassa koodinpätkässä:

  • 'elem' muuttuja soveltaa ' document.getElementById() ' -menetelmää lisätäksesi div-elementtiin sen tunnuksella 'myDiv'.
  • Seuraavaksi ' console.log() ' -menetelmä käyttää ' getAttribute() ” -menetelmää hakeaksesi haetun div-elementin määritetyn 'data'-attribuutin arvon ja näyttää sen sitten verkkokonsolissa.
  • Sama tehtävä suoritetaan muiden määritettyjen tietomääritteiden käyttämiseksi.

Huomautus: 'getAttribute()'-menetelmä määrittää dataattribuutin etuliitteellä 'data', jota seuraa yhdysmerkki (-), eli (data-), jota ei vaadita 'dataset()'-ominaisuutta käytettäessä.

Lähtö

Yllä oleva tulos näyttää kaikki määritetyt dataattribuuttiarvot painiketta napsauttamalla.

Esimerkki 3: Kirjoita tietomäärite 'dataset'-ominaisuuden avulla

Tämä esimerkki kirjoittaa tietomääritteet 'dataset'-ominaisuuden avulla.

Painikeelementin sisältöä muutetaan nykyisen skenaarion mukaan:

< painiketta onclick = 'jsFunc()' > Kirjoita tietomäärite -painiketta >

Kirjoita nyt uusi data-attribuutti lisättyyn div-elementtiin:

< käsikirjoitus >

funktio jsFunc ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

elementti. tietojoukko . id = 'henkilö'

konsoli. Hirsi ( elementti. tietojoukko ) ;

}

käsikirjoitus >

Yllä olevassa koodilohkossa:

  • ' tietojoukko ” ominaisuus kirjoittaa uuden dataattribuutin nimen 'id' määritetyllä merkkijonoarvolla.
  • Seuraavaksi ' conolse.log() ' käyttää 'dataset'-ominaisuutta näyttääkseen 'DOMStringMap'-käyttöliittymän, joka sisältää juuri kirjoitetun dataattribuutin verkkokonsoliin.

Lähtö

Täällä konsoli näyttää 'DOMStringMap', joka sisältää uuden dataattribuutin 'id', joka on kirjoitettu 'dataset'-ominaisuuden avulla.

Esimerkki 4: Päivitä tietomääritteen arvo

Tämä esimerkki päivittää tietyn tietomääritteen olemassa olevan arvon 'dataset'-ominaisuuden avulla.

Painikeelementin tekstiä muutetaan annetun skenaarion mukaisesti:

< painiketta onclick = 'jsFunc()' > Päivitä tietomäärite -painiketta >

Siirry nyt JavaScript-osioon:

< käsikirjoitus >

funktio jsFunc ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

elementti. tietojoukko . nimi = 'John'

konsoli. Hirsi ( elementti. tietojoukko . nimi ) ;

}

käsikirjoitus >

Yllä olevassa koodilohkossa määritetty 'nimi'-dataattribuutin arvo päivitetään ' tietojoukko ” omaisuutta.

Lähtö

Konsoli näyttää määritettyjen tietomääritteiden päivitetyn arvon painiketta napsauttamalla.

Esimerkki 5: Poista tietomäärite

Tämä esimerkki poistaa tietyn dataattribuutin käyttämällä 'delete'-avainsanaa.

Painikeelementin tekstiä muutetaan tarpeen mukaan:

< painiketta onclick = 'jsFunc()' > Poista tietomäärite -painiketta >

Noudata nyt JavaScript-koodilohkoa:

< käsikirjoitus >

funktio jsFunc ( ) {

konst elementti = asiakirja. getElementById ( 'myDiv' ) ;

poista elementti. tietojoukko . ikä ;

konsoli. Hirsi ( elementti. tietojoukko . ikä ) ;

}

käsikirjoitus >

Yllä oleva koodinpätkä määrittää ' poistaa '-avainsana 'dataset'-ominaisuuden kanssa poistaaksesi käytetyn dataattribuutin.

Lähtö

On havaittu, että konsoli näyttää ' määrittelemätön ” painikkeen napsautus, joka vahvistaa selvästi, että käytettyjen tietojen attribuutti on poistettu.

Johtopäätös

JavaScriptissä dataattribuutteja voidaan käyttää eri tavoin, kuten lukea, käyttää, kirjoittaa, päivittää ja poistaa niitä vaatimusten mukaisesti. Kaikki nämä tehtävät voidaan suorittaa sisäänrakennetun ' tietojoukko ” omaisuutta. Käyttäjä voi kuitenkin käyttää dataattribuuttia myös yksitellen ' getAttribute() ”menetelmä. Tämä viesti on käytännössä selittänyt dataattribuuttien käytön JavaScriptissä.