Стилизовање елемената у JavaScript-у

Претпоставимо да имамо неколико параграфа:

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

Хајде да пређемо преко ових параграфа петљом и на крај сваког параграфа додамо везу, при клику на коју ће тексту параграфа бити додато неко стилизовање. На пример, текст параграфа ће постати прецртан (што чини CSS својство text-decoration).

Хајде да размотримо два нијанса таквог задатка.

Као прво, као што је већ разматрано у претходним лекцијама, не треба мењати стилове параграфа директно преко JavaScript-а - много ће бити погодније додавати неке CSS класе.

Као друго, при имплементацији таквог задатка вас чека изненађење. Да бисте разумели његову суштину, хајде да погледамо HTML код параграфа након додавања веза:

<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>

Замислимо сада да при клику на везу текст параграфа буде прецртан. Међутим, веза у овом случају је такође део параграфа и такође ће бити прецртана! Вероватно такав ефекат нам није потребан. Желимо да текст буде прецртан, али да веза - не буде.

За решавање проблема једноставно треба умотати текст параграфа у таг span, овако:

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

Додајте на крај сваког параграфа везу, при клику на коју ће текст параграфа бити прецртан (а веза - неће).

Модификујте претходни задатак тако да након клиска на везу та веза буде уклоњена из параграфа (а текст параграфа постане прецртан).

Дата је нека HTML табела. Додајте у ту табелу још једну колону са везом. При клику на ту везу ред са том везом треба да постане зелене позадине.

Модификујте претходни задатак тако да први клик на везу обоји ред у зелену позадину, а други клик поништи то дејство.