Stylizacja elementów w JavaScript
Załóżmy, że mamy kilka akapitów:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Przejdźmy przez te akapity pętlą i na końcu
każdego akapitu dodajmy link, po kliknięciu
którego do tekstu akapitu zostanie dodana
pewna stylizacja. Na przykład, tekst akapitu
stanie się przekreślony (robi to
właściwość CSS text-decoration).
Omówmy dwa niuanse takiego zadania.
Po pierwsze, jak już omawiano w poprzednich lekcjach, nie należy zmieniać stylów akapitu bezpośrednio przez JavaScript - znacznie wygodniej będzie nakładać jakieś klasy CSS.
Po drugie, przy implementacji takiego zadania czeka na Ciebie pewna niespodzianka. Aby zrozumieć jej sens, spójrzmy na kod HTML akapitów po dodaniu linków:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Wyobraźmy sobie teraz, że po kliknięciu linku tekst akapitu zostanie przekreślony. Jednakże, link w tym przypadku również jest częścią akapitu i również zostanie przekreślony! Prawdopodobnie taki efekt nie jest nam potrzebny. Chcemy, aby tekst został przekreślony, ale link - nie.
Aby rozwiązać problem, wystarczy po prostu owinąć
tekst akapitu w tag span, w ten sposób:
<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>
Dany jest następujący kod HTML:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Dodaj na końcu każdego akapitu link, po kliknięciu którego tekst akapitu zostanie przekreślony (a link - nie).
Zmodyfikuj poprzednie zadanie tak, aby po kliknięciu linku ten link został usunięty z akapitu (a tekst akapitu stał się przekreślony).
Dana jest pewna tabela HTML. Dodaj do tej tabeli jeszcze jedną kolumnę z linkiem. Po kliknięciu na ten link wiersz z tym linkiem powinien stać się zielonego tła.
Zmodyfikuj poprzednie zadanie tak, aby pierwsze kliknięcie linku kolorowało wiersz na zielony tło, a drugie kliknięcie cofało tę akcję.
