Štýlovanie prvkov v JavaScripte

Majme niekoľko odsekov:

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

Prejdime tieto odseky cyklom a na koniec každého odseku pridajme odkaz, po kliknutí na ktorý sa textu odseku pridá nejaké štýlovanie. Napríklad, text odseku sa stane prečiarknutým (to zabezpečuje CSS vlastnosť text-decoration).

Poďme diskutovať o dvoch nuansách tejto úlohy.

Po prvé, ako už bolo diskutované v predchádzajúcich lekciách, nemali by ste meniť štýly odseku priamo cez JavaScript - oveľa pohodlnejšie bude použiť nejaké CSS triedy.

Po druhé, pri implementácii takejto úlohy vás čaká nejaké prekvapenie. Aby ste pochopili jeho podstatu, pozrime sa na HTML kód odsekov po pridaní odkazov:

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

Predstavme si teraz, že po kliknutí na odkaz sa text odseku prečiarkne. Avšak, odkaz v tomto prípade je tiež súčasťou odseku a tiež sa prečiarkne! Pravdepodobne takýto efekt nechceme. Chceme, aby sa text prečiarkol, ale odkaz - nie.

Na vyriešenie problému stačí jednoducho obaliť text odseku do tagu span, takto:

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

Daný je nasledujúci HTML kód:

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

Pridajte na koniec každého odseku odkaz, po kliknutí na ktorý sa text odseku prečiarkne (a odkaz - nie).

Upravte predchádzajúcu úlohu tak, aby po kliknutí na odkaz sa tento odkaz odstránil z odseku (a text odseku sa stal prečiarknutým).

Daná je nejaká HTML tabuľka. Pridajte do tejto tabuľky ešte jeden stĺpec s odkazom. Po kliknutí na tento odkaz by mal riadok s týmto odkazom získať zelené pozadie.

Upravte predchádzajúcu úlohu tak, aby prvé kliknutie na odkaz zafarbilo riadok na zelené pozadie, a druhé kliknutie zrušilo túto akciu.