Prop vs attr i JavaScript
Denne bloggen vil oppgi forskjellene mellom Prop () og ATTR () -metodene i JavaScript.
Kjerneforskjeller mellom prop () og attr () i JavaScript
Følgende er forskjellene mellom prop () og attr () metoder i JavaScript:
| rekvisitt() | attr () |
|---|---|
| Prop () -metoden kan endre verdien av elementet. | Attr () -metoden, derimot, påvirker ikke elementets verdi. |
| Det viser gjeldende verdi på HTML -koden. | Det viser standard settverdi. |
| Denne metoden brukes som en syntaks av egenskaper for å endre verdien. | Denne metoden brukes til attributtet. |
Sjekk ut det gitte eksemplet for å bli praktisk talt bli kjent.
Eksempel: Prop () og attr () på inngangstekstfeltet
I dette eksemplet vil vi bruke "attr ()”Og“rekvisitt()”Metoder på inngangstekstfeltene separat.
La oss se hvordan begge metodene fungerer:
attr () -metoden vil ikke endre tekstfeltverdien
Prop () -metoden vil endre tekstfeltverdien
I ovennevnte HTML -linjer med kode:
- Inkluder “" elementet og utfør den uttalte stylingen.
- Inkluder også en overskrift.
- Det ekstra "" er et HTML -element som tar en verdi fra brukeren, og "type" tilsvarer attributtet som refererer til inndataene skal være tekst.
- “id”Attributt er spesifisert for å få tilgang til tekstfeltet. Angi også den oppgitte standardverdien med "verdi" Egenskap.
- Ta også med knappen for å utløse funksjonalitetene.
- Etter det, inkluder "”Tag for å akkumulere utfallet som tilsvarer“attr ()”Metode.
- På samme måte, gjenskape de inkluderte funksjonalitetene for å vise resultatet av "rekvisitt()”Metode via“Inngangstekst" felt.
La oss nå gå videre til JavaScript -koden:
>
$ ('#btnone').klikk (funksjon ()
$ ("#attr").tekst ($ ('#inputText').attr ('verdi') + " - standardverdi");
);
);
$ (dokument).klar (funksjon ()
$ ('#btntwo').klikk (funksjon ()
$ ("#prop").tekst ($ ('#textInput').Prop ('verdi') + " - gjeldende verdi");
);
);
I kodeblokken ovenfor, bruk følgende trinn:
- Inkluder jQuery -biblioteket innenfor "”Tag for å bruke metodene sine via“src" Egenskap.
- Etter det, bruk "klar()”Metode, som vil utføre den oppgitte funksjonen så snart Document Object Model (DOM) er lastet.
- Få tilgang til den opprettede knappen slik at den oppgitte funksjonen kjøres på knappen klikk via "Klikk ()”Metode.
- I funksjonsdefinisjonen får du tilgang til inngangstekstfeltet av dets “id”Og returner tekstinnholdet via“tekst()”Metode.
- Bruk også “attr ()”Metode for å få tilgang til“verdi”Attributt til det hentet inngangstekstfeltet.
- I dette tilfellet vil verdien forbli den samme uavhengig av den brukerdefinerte teksten.
- På samme måte gjenta den diskuterte prosedyren for "rekvisitt()”Metode, som anvendt på“attr ()”Metode.
- I dette tilfellet vil den brukerdefinerte teksten i tekstfeltet bli oppdatert med den innstilte verdien og lagt til den hentet "”Element av sin ID.
Produksjon
Utgangen viser at “attr ()”Metoden endrer ikke den opprinnelige tilstanden, mens“rekvisitt()”Metode viser den oppdaterte verdien.
Konklusjon
“attr ()”Metode endrer ikke elementets verdiattributt. På den annen side "rekvisitt()”Metode oppdaterer det. Begge metodene har sine fordeler og ulemper avhengig av brukerens krav. Denne bloggen uttalte forskjellene mellom attr () og prop () metoder ved hjelp av et eksempel.