Stilizacija elemenata u JavaScript-u
Recimo da imamo nekoliko paragrafa:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Hajde da prođemo kroz ove paragrafe petljom i na kraj
svakog paragrafa dodamo link, na čiji klik
će tekstu paragrafa biti dodata
određena stilizacija. Na primer, tekst paragrafa
će postati precrtan (to čini
CSS svojstvo text-decoration).
Razgovarajmo o dva nijansa ove zadatke.
Prvo, kao što je već objašnjeno u prethodnim lekcijama, ne treba direktno menjati stilove paragrafa preko JavaScript-a – mnogo pogodnije će biti dodavati neke CSS klase.
Drugo, prilikom implementacije ove zadatke vas očekuje izvesno iznenađenje. Da bismo razumeli njegovu suštinu, pogledajmo HTML kod paragrafa nakon dodavanja linkova:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Zamislimo sada da se klikom na link tekst paragrafa precrta. Međutim, link u ovom slučaju je takođe deo paragrafa i takođe će biti precrtan! Najverovatnije takav efekat nam nije potreban. Želimo da tekst bude precrtan, ali da link – ne bude.
Za rešenje problema potrebno je jednostavno obmotati
tekst paragrafa u tag span, ovako:
<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>
Dat je sledeći HTML kod:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Dodajte na kraj svakog paragrafa link, na čiji klik će tekst paragrafa biti precrtan (a link – neće).
Modifikujte prethodni zadatak tako da nakon klika na link taj link bude obrisan iz paragrafa (a tekst paragrafa postane precrtan).
Data je neka HTML tabela. Dodajte u ovu tabelu još jednu kolonu sa linkom. Klikom na taj link red sa tim linkom treba da postane zelenog pozadinskog boje.
Modifikujte prethodni zadatak tako da prvi klik na link boji red u zelenu pozadinsku boju, a drugi klik poništava ovu akciju.
