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:

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

Saame viite meie elemendile muutujasse:

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

Väljastame vajalike atribuutide väärtused:

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

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

elem.type = 'submit';

Antud on järgmine sisendväli:

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

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

Antud on järgmine sisendväli:

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

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

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

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

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.

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

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

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.