Stylování prvků v JavaScriptu
Předpokládejme, že máme několik odstavců:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Pojďme projít tyto odstavce cyklem a na konec
každého odstavce přidat odkaz, po jehož kliknutí
bude textu odstavce přidána určitá stylizace.
Například text odstavce se přeškrtne (to dělá
CSS vlastnost text-decoration).
Pojďme probrat dvě nuance takového úkolu.
Za prvé, jak již bylo diskutováno v předchozích lekcích, neměli byste měnit styly odstavce přímo pomocí JavaScriptu - mnohem pohodlnější bude přidávat nějaké CSS třídy.
Za druhé, při implementaci takového úkolu vás čeká určité překvapení. Abyste pochopili jeho podstatu, podívejme se na HTML kód odstavců po přidání odkazů:
html<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Představme si nyní, že po kliknutí na odkaz se text odstavce přeškrtne. Odkaz je však v tomto případě také součástí odstavce a také se přeškrtne! S největší pravděpodobností takový efekt nechceme. Chceme, aby byl text přeškrtnutý, ale odkaz - ne.
K vyřešení problému stačí obalit
text odstavce tagem span, takto:
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>
Je dán následující HTML kód:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Přidejte na konec každého odstavce odkaz, po jehož kliknutí bude text odstavce přeškrtnut (a odkaz - ne).
Upravte předchozí úkol tak, aby po kliknutí na odkaz byl tento odkaz odstraněn z odstavce (a text odstavce se stal přeškrtnutým).
Je dána nějaká HTML tabulka. Přidejte do této tabulky ještě jeden sloupec s odkazem. Po kliknutí na tento odkaz by se řádek s tímto odkazem měl stát zeleného pozadí.
Upravte předchozí úkol tak, aby první kliknutí na odkaz obarvilo řádek na zelené pozadí, a druhé kliknutí tuto akci zrušilo.