Стылізацыя элементаў на 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 табліца. Дадайце ў гэтую табліцу яшчэ адну калонку са спасылкай. Па націску на гэтую спасылку шэраг з гэтай спасылкай павінен стаць зялёнага фону.

Мадыфікуйце папярэднюю задачу так, каб першы націск па спасылцы фарбаваў шэраг у зялёны фон, а другі націск адмяняў гэтае дзеянне.