Kuidas luua tekstikasti dünaamiliselt JavaScriptis

Mõned nimetavad seda maagiks - võime teha esemeid ootamatult kuhugi välja. Sellist maagiat saate luua oma veebisaidil mõne JavaScripti rea abil. Näiteks tekstikastid on head HTML-elemendid, mida kasutada, kui objektide õppimine muutub dünaamiliseks. Selle asemel, et neid oma veebilehele kujundada, lisage vajadusel tekstikastid ja tehke samal ajal muljet saidi külastajatest.

Tekstikasti loomine

Enne tekstikasti tegemist tuleb aru saada, milline on tekstikast. HTML teab seda sisendmärgisena, nagu on näidatud järgmises näites:

See sisendmärgis loob tekstikasti, millel on kaks olulist atribuuti; id ja tüüp. Tüübi atribuut, mille väärtus on "tekst", ütleb, et brauserid loovad tekstikasti teise tüübi, näiteks nupu asemel. Id-atribuut, mis on vabatahtlik, võib olla kasulik, kui soovite tekstikasti hiljem manipuleerida. Väärtusvõimalus, mis on ka valikuline, sisaldab väärtust, mida soovite veebilehe avamisel tekstikastis näha.

Dünaamilised tekstikastid

HTML ei huvita, kui määrate elemendi atribuudid nii kaua, kui annate neile väärtusi kuskil. See tähendab, et teil on võimalus luua tekstikasti element dünaamiliselt ja määrata selle atribuudid igal ajal. Funktsioon document.createElement muudab selle võimalikuks allpool näidatud viisil:

var box = document.createElement ("sisend");

See on kõik, mis on vajalik HTML sisendelemendi loomiseks ja selle määramiseks muutuja nimega "kast". Kasti objekt ei muutu tekstikasti, enne kui annate selle tüübi atribuudi väärtuse "tekst", nagu on näidatud selles näites:

box.type = "tekst";

Veebilehe integreerimine

Allolev kood lisab tekstikasti HTML-dokumendile.kasutades funktsiooni appendChild:

document.body.appendChild (kast);

Kui soovite lisada tekstikasti pärast konkreetset kontrolli, kasutage selle asemel järgmist.

document.getElementById ("some_Element_ID"). appendChild (kast);

Asendage "some_Element_ID" selle elemendi nimega, mille järel soovite tekstikasti lisada. Näiteks kui see element oli nupp, mille ID oli "nupp1, " ilmub appendChild avaldus järgmiselt:

document.getElementById ("button1"). appendChild (kast);

Valikulised atribuudid

Teie uus tekstikast töötab selle koodi abil suurepäraselt. Lihtsalt looge JavaScripti funktsioon, mis sisaldab avaldust ja kutsub seda alati, kui vajate tekstikasti. Saate määrata ka tekstikasti väärtuse ja ID atribuudid järgmiselt:

box.value = boxValue; box.id = boxID;

Laadige boxValue ja boxID väärtused funktsioonile ja rakendatakse neid atribuute tekstikasti. Kui määrate ID-väärtuse, saate seda hiljem kasutada tekstikasti omaduste värskendamiseks, nagu on näidatud alltoodud näites:

var boxObject = document.getElementById (boxID); boxObject.style.backgroundColor = "punane";

Esimene avaldus saab viite tekstikasti ja viimane avaldus muudab tekstikasti taustavärvi punaseks.

 

Jäta Oma Kommentaar