Elementide stiilide muutmine JavaScriptis
Oletame, et meil on mitu lõiku:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Käime need lõigud tsükliga läbi ja iga lõigu lõppu
lisame lingi, millele vajutades
lõigu tekstile lisatakse
mõni stiil. Näiteks muutub lõigu tekst
läbikriipsutatud (seda teeb
CSS omadus text-decoration).
Arutame kahe sellise ülesande nüansi üle.
Esiteks, nagu eelmistes õppetundides juba arutatud, ei tohiks lõikude stiile otse muuta JavaScripti kaudu - palju mugavam on lisada mõni CSS klass.
Teiseks, sellise ülesande rakendamisel ootab teid üllatus. Selle olemuse mõistmiseks vaatame lõikude HTML-koodi pärast linkide lisamist:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Kujutagem nüüd ette, et lingile vajutades lõigu tekst läbib kriipsutatakse. Kuid link on sel juhul samuti osa lõigust ja läbib kriipsutatakse ka! Tõenäoliselt selline efekt ei ole meile vajalik. Me soovime, et tekst oleks läbikriipsutatud, kuid link - mitte.
Probleemi lahendamiseks tuleb lihtsalt mähkida
lõigu tekst span sildisse, nii:
<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>
Antud on järgmine HTML-kood:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Lisage iga lõigu lõppu link, millele klõpsates lõigu tekst läbib kriipsutatakse (kuid link - mitte).
Muutke eelmist ülesannet nii, et pärast lingile vajutamist see link kustutatakse lõigust (ja lõigu tekst muutub läbikriipsutatud).
Antud on mingi HTML-tabel. Lisage sellesse tabelisse veel üks veerg lingiga. Sellele lingile vajutades peab rida selle lingiga muutuma rohelise taustaga.
Muutke eelmist ülesannet nii, et esimene vajutus lingil värvib rea roheliseks taustaks, ja teine vajutus tühistab selle tegevuse.
