Sildi atribuudid omadustena JavaScriptis

Õpime nüüd kuidas saada sildi atribuute. Siin kehtib järgmine reegel: igale sildi atribuudile vastab samanimeline DOM elemendi omadus.

Vaatame seda näitega. Olgu meil järgmine silt:

html<input id="elem" type="text">

Saame viite meie elemendile muutujasse:

javascriptlet elem = document.querySelector('#elem');

Väljastame vajalike atribuutide väärtused:

javascriptconsole.log(elem.id);   // väljastab 'elem'
console.log(elem.type); // väljastab 'text'

Ja nüüd muudame näiteks atribuudi väärtust:

javascriptelem.type = 'submit';

Задание 1

Antud on järgmine sisendväli:

html<input id="elem" type="email">

Antud on ka nupp. Vajutades nupule kuva ekraanile ülaltoodud sisendvälja atribuudi type väärtus.

Задание 2

Antud on järgmine sisendväli:

html<input id="elem" type="email">

Antud on ka nupp. Vajutades nupul pane atribuuti type väärtus submit.

Задание 3

Olgu teil link kujul a silt, nupp ja lõik. Vajutades nupule kuva lõigus lingi atribuudi href väärtus.

Задание 4

Olgu teil link ja nupp. Vajutades nupul lisa lingi teksti lõppu selle atribuudi href väärtus ümarsulgudes.

Задание 5

Olgu teil pilt. Paigutage see lehele kasutades img silti. Olgu antud ka nupp ja lõik. Tehke nii, et nupule vajutades kirjutatakse lõikusse pildi tee selle atribuudist src.

Задание 6

Antud pilt img silts ja nupp. Nupule vajutades pane atribuuti width väärtus 300.

Задание 7

Antud pilt img silts ja nupp. Olgu atribuudis width määratud teatud laius. Tehke nupp, millele vajutades pildi laius suureneb 2 korda.

Задание 8

Olgu teil kaks pilti. Tehke lehele img silt ja kaks nuppu. Esimesele nupule vajutades pane atribuuti src tee esimese pildini, ja teisele nupule vajutades - tee teise pildini.