Pri izpolnjevanju določenega obrazca ali vprašalnika pogosto pride do situacij, ko je treba kot odgovor na izbrano opcijo prikazati določen odgovor ali obvestilo. Na primer obravnavanje vprašanj z več možnimi odgovori itd. V takšnih primerih je spreminjanje besedila oznake z uporabo JavaScripta zelo koristno pri izboljšanju dostopnosti obrazcev HTML in celotne zasnove dokumenta.
Kako spremeniti besedilo nalepke s pomočjo JavaScripta?
Za spreminjanje besedila oznake v JavaScriptu je mogoče uporabiti naslednje pristope:
-
- “ notranjiHTML ” lastnina.
- “ innerText ” lastnina.
- jQuery “ besedilo() « in » html() ” metode.
1. pristop: spremenite besedilo oznake v JavaScriptu z uporabo lastnosti innerHTML
' notranjiHTML ” vrne notranjo vsebino HTML elementa. To lastnost je mogoče uporabiti za pridobivanje določene oznake in spreminjanje njenega besedila v novo dodeljeno besedilno vrednost.
Sintaksa
element.innerHTML
V zgornji sintaksi:
-
- “ element ” se nanaša na element, na katerem bo določena lastnost uporabljena za vrnitev vsebine HTML.
Primer
Preglejte naslednji delček kode, da jasno razložite navedeni koncept:
< center >< telo >
< oznaka id = 'lbl' > DOM oznaka >
< št >< št >
< gumb onclick = 'labelText()' > Klikni tukaj gumb >
telo > center >
-
- Najprej v okviru »
', vključite ' oznaka ' z navedenim ' id « in » besedilo ' vrednote. - Nato ustvarite gumb s priloženim » onclick ” dogodek, ki prikliče funkcijo labelText().
- Najprej v okviru »
Zdaj sledite spodnji kodi JavaScript:
funkcijo labelText ( ) {pustiti get = document.getElementById ( 'lbl' )
get.innerHTML= 'Skrajšano ime je Document Object Model' ;
}
-
- Deklarirajte funkcijo z imenom ' labelText() ”.
- V njegovi definiciji dostopajte do id-ja podanega ' oznaka ' uporabljati ' document.getElementById() ” metoda.
- Na koncu uporabite lastnost innerHTML in dodelite nov ' besedilo ” za dostopno oznako. To bo imelo za posledico preoblikovanje besedila oznake v novo vrednost besedila po kliku gumba.
Izhod
V zgornjem izhodu je mogoče opaziti, da je besedilna vrednost ' oznaka « se spremeni tako v DOM kot tudi v kodi v » Elementi ”.
2. pristop: spremenite besedilo oznake v JavaScriptu z uporabo lastnosti innerText
' innerText ” vrne besedilno vsebino elementa. To lastnost je mogoče implementirati za dodelitev vrednosti uporabniškega vnosa, vnesene v vnosno polje, besedilu dodeljene oznake.
Sintaksa
element.innerText
V zgornji sintaksi:
-
- “ element ” označuje element, na katerem bo določena lastnost uporabljena za vrnitev besedilne vsebine.
Primer
Naslednji primer prikazuje navedeni koncept:
< center >< telo >Vnesite ime: < vnos vrsta = 'besedilo' id = 'ime' vrednost = '' samodokončanje = 'izklopljen' >
< str >< vnos vrsta = 'gumb' id = 'bt' vrednost = 'Spremeni besedilo oznake' onclick = 'labelText()' > str >
< oznaka id = 'lbl' > n / A oznaka >
telo > center >
-
- Najprej dodelite vnosno besedilno polje z podanim ' id ”. ' nič « vrednost tukaj pomeni, da bo vrednost pridobljena od uporabnika in nastavitev samodokončanja na » izklopljeno ” se bo izognil predlaganim vrednostim.
- Nato vključite oznako z navedenim » id « in » besedilo ” vrednost.
Zdaj v izrezku kode JavaScript izvedite naslednje korake:
funkcijo labelText ( ) {pustiti get = document.getElementById ( 'lbl' ) ;
pustiti ime = dokument.getElementById ( 'ime' ) .vrednost;
get.innerText = ime;
}
-
- Definirajte funkcijo z imenom ' labelText() ”. V njeni definiciji dostopajte do ustvarjene oznake z uporabo » document.getElementById() ” metoda.
- Podobno ponovite zgornji korak za dostop do določenega polja za vnos besedila in iz njega pridobite vrednost, ki jo je vnesel uporabnik.
- Nazadnje dodeljeni oznaki dodelite uporabniško vneseno vrednost iz prejšnjega koraka. To bo spremenilo besedilo oznake v vrednost, ki jo je uporabnik vnesel v polje za vnos besedila.
Izhod
Iz zgornjega rezultata je razvidno, da je želena zahteva dosežena.
3. pristop: spremenite besedilo oznake v JavaScriptu z uporabo metod jQuery text() in html().
' besedilo() ” vrne besedilno vsebino izbranih elementov. html() ” vrne notranjo vsebino HTML izbranih elementov.
Sintaksa
$ ( selektor ) .besedilo ( )
V tej sintaksi:
-
- “ selektor ” kaže na besedilno vsebino dostopanega elementa.
V zgornji sintaksi:
-
- “ selektor ” se nanaša na notranji HTML elementa, do katerega dostopate.
Primer
Ta primer bo ilustriral navedeni koncept z uporabo metod jQuery.
Pojdite skozi spodnji delček kode:
< scenarij src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > scenarij >< center >< telo >
< oznaka id = 'lbl1' > To je naslednja spletna stran: oznaka >
< št >< št >
< oznaka id = 'lbl2' > Vsebina: oznaka >
< št >< št >
< gumb onclick = 'labelText()' > Kliknite za Spletna stran gumb >
< gumb onclick = 'labelText2()' > Kliknite za Vsebina gumb >
telo > center >
-
- Najprej vključite » jQuery ” za uporabo svojih metod.
- Po tem v okviru »
', vključite dve različni oznaki z navedenim ' id « in besedilno vrednost za vsakega od njih. - Prav tako dodelite ločene gumbe vsaki od ustvarjenih oznak. Oba gumba bosta imela priložen ' onclick ” dogodek, ki prikliče dve različni določeni funkciji.
Zdaj pojdite skozi naslednje vrstice kode JavaScript:
funkcijo labelText ( ) {$ ( '#lbl1' ) .besedilo ( 'Linux' )
}
funkcijo labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- V prvem koraku deklarirajte funkcijo z imenom ' labelText() ”.
- V njeni definiciji dostopajte do oznake proti pridobljenemu ' id « in uporabite » besedilo() ”. Posledica tega bo sprememba besedilne vrednosti oznake na določeno vrednost v njenem parametru.
- Podobno definirajte funkcijo z imenom ' labelText2() ”.
- Tu na podoben način ponovite zgoraj opisani korak za dostop do oznake. V tem primeru uporabite » html() ” metoda. Tudi ta metoda bo delovala na enak način in vrnila določeno besedilno vrednost ter tako spremenila besedilo oznake.
Izhod
V zgornjem izhodu prva preoblikovana besedilna vrednost oznake v dokumentnem objektnem modelu (DOM) ustreza jQuery ' besedilo() «, druga pa je rezultat » html() ” metoda.
Zbrali smo pristope za spreminjanje besedila etiket z uporabo JavaScripta.
Zaključek
' notranjiHTML » lastnina, » innerText ' lastnost ali jQueryjev ' besedilo() « in » html() ” lahko uporabite metode za spreminjanje besedila nalepke s pomočjo JavaScripta. Lastnost innerHTML lahko uporabite za pridobitev določene oznake in spremembo njene besedilne vsebine v novo dodeljeno besedilno vrednost. Lastnost innerText je mogoče implementirati, da nalepki, do katere dostopate, dodelite novo besedilno vrednost in jo tako spremenite. Pristop jQuery je mogoče uporabiti za preoblikovanje besedilne vrednosti oznake s pomočjo njegovih dveh metod, kar ima za posledico enak rezultat v obliki dveh različnih dodeljenih besedilnih vrednosti. Ta zapis je pokazal tehnike za spreminjanje besedila nalepk z uporabo JavaScripta.