Elementtien tyylittely JavaScriptillä
Oletetaan, että meillä on useita kappaleita:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Käydään läpi nämä kappaleet silmukalla ja lisätään
jokaisen kappaleen loppuun linkki, jota napsautettaessa
kappaleen tekstille lisätään
tietty tyylittely. Esimerkiksi kappaleen tekstistä
tulee yliviivattu (sen tekee
CSS-ominaisuus text-decoration).
Keskustellaan kahdesta tällaisen tehtävän vivahteesta.
Ensinnäkin, kuten aiemmissa oppitunneissa on keskusteltu, kappaleiden tyylejä ei tulisi muuttaa suoraan JavaScriptin kautta - on paljon kätevämpää asettaa jotain CSS-luokkia.
Toiseksi, tällaisen tehtävän toteuttamisessa sinua odottaa pieni yllätys. Ymmärtääksesi sen olemuksen, katsotaan HTML-koodia kappaleille linkkien lisäämisen jälkeen:
html<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Kuvittele nyt, että linkkiä napsautettaessa kappaleen tekstistä tulee yliviivattu. Kuitenkin linkki tässä tapauksessa on myös osa kappaletta ja tulee myös yliviivatuksi! Todennäköisesti tällainen efekti ei ole meille toivottu. Haluamme, että teksti yliviivataan, mutta linkkiä ei.
Ongelman ratkaisemiseksi tarvitsee vain kääriä
kappaleen teksti span-tagiin, näin:
html<p><span>text1</span><a href="">link</a></p>
<p><span>text2</span><a href="">link</a></p>
<p><span>text3</span><a href="">link</a></p>
Annettuna on seuraava HTML-koodi:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Lisää jokaisen kappaleen loppuun linkki, jota klikatessa kappaleen tekstistä tulee yliviivattu (mutta linkistä ei).
Muokkaa edellistä tehtävää siten, että linkin napsautuksen jälkeen linkki poistetaan kappaleesta (ja kappaleen tekstistä tulee yliviivattu).
Annettuna on tietty HTML-taulukko. Lisää tähän taulukkoon toinen sarake linkillä. Kun tätä linkkiä napsautetaan, sen linkin rivi tulee vihreällä taustalla.
Muokkaa edellistä tehtävää siten, että ensimmäinen linkin napsautus värjää rivin vihreäksi taustaksi, ja toinen napsautus peruu tämän toiminnon.