Stilizacija elemenata u JavaScript-u

Recimo da imamo nekoliko paragrafa:

html<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:

html<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:

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>

html<p>text1</p>
<p>text2</p>
<p>text3</p>