Tagien attribuutit ominaisuuksina JavaScriptissä
Opitaan nyt hakemaan tagien attribuutteja. Tässä pätee seuraava sääntö: jokainen tagin attribuutti vastaa samannimistä DOM-elementin ominaisuutta.
Katsotaanpa esimerkkiä. Oletetaan, että meillä on tällainen tagi:
html<input id="elem" type="text">
Haetaan viite elementtiimme muuttujaan:
javascriptlet elem = document.querySelector('#elem');
Tulostetaan tarvitsemiemme attribuuttien arvot:
javascriptconsole.log(elem.id); // tulostaa 'elem'
console.log(elem.type); // tulostaa 'text'
Vaihdetaan nyt esimerkiksi attribuutin arvo:
javascriptelem.type = 'submit';
Annettu on seuraava input-kenttä:
html<input id="elem" type="email">
Annettu on myös painike. Painikkeen klikkauksella tulosta
ruudulle yllä olevan input-kentän type-attribuutin
sisältö.
Annettu on seuraava input-kenttä:
html<input id="elem" type="email">
Annettu on myös painike. Painikkeen klikkauksella kirjoita
type-attribuuttiin arvo submit.
Oletetaan, että sinulla on linkki a-tagina,
painike ja kappale. Painikkeen klikkauksella tulosta
kappaleeseen linkin href-attribuutin sisältö.
Oletetaan, että sinulla on linkki ja painike. Painikkeen
klikkauksella lisää linkin tekstin loppuun
sen href-attribuutin sisältö pyöreissä
suluissa.
Oletetaan, että sinulla on kuva. Sijoita se
sivulle img-tagin avulla.
Oletetaan, että on annettu myös painike ja kappale. Tee
niin, että painikkeen klikkauksella kappaleeseen kirjoitetaan
kuvan polku sen src-attribuutista.
Annettu on kuva img-tagissa ja painike.
Painikkeen klikkauksella kirjoita width-
attribuuttiin arvo 300.
Annettu on kuva img-tagissa ja painike.
Oletetaan, että width-attribuutissa on asetettu tietty
leveys. Tee painike, jonka klikkauksella
kuvan leveys kaksinkertaistuu.
Oletetaan, että sinulla on kaksi kuvaa. Tee
sivulle img-tagi ja kaksi painiketta.
Ensimmäisen painikkeen klikkauksella kirjoita src-
attribuuttiin polku ensimmäiseen kuvaan, ja toisen painikkeen
klikkauksella polku toiseen kuvaan.