Oblikovanje elementov v JavaScript
Recimo, da imamo več odstavkov:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Pojdimo skozi te odstavke z zanko in na konec
vsakega odstavka dodajmo povezavo. Ob kliku
na to povezavo bo besedilu odstavka dodano
določeno oblikovanje. Na primer, besedilo odstavka
bo prečrtano (to naredi
CSS lastnost text-decoration).
Razpravljajmo o dveh niansah te naloge.
Prvič, kot smo že razpravljali v prejšnjih lekcijah, ne smemo spreminjati slogov odstavkov neposredno prek JavaScript - veliko bolj priročno bo dodajati nekatera CSS razreda.
Drugič, pri implementaciji takšne naloge vas čaka nepresenečenje. Da razumemo njegovo bistvo, poglejmo HTML kodo odstavkov po dodajanju povezav:
<p>text1<a href="">povezava</a></p>
<p>text2<a href="">povezava</a></p>
<p>text3<a href="">povezava</a></p>
Predstavljajmo si zdaj, da ob kliku na povezavo besedilo odstavka postane prečrtano. Vendar pa je povezava v tem primeru tudi del odstavka in bo tudi prečrtana! Verjetno takšen učinek ni želen. Želimo, da se besedilo prečrta, vendar povezava - ne.
Za rešitev težave preprosto zavijemo
besedilo odstavka v tag span, takole:
<p><span>text1</span><a href="">povezava</a></p>
<p><span>text2</span><a href="">povezava</a></p>
<p><span>text3</span><a href="">povezava</a></p>
Podan je naslednji HTML koda:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Dodajte na konec vsakega odstavka povezavo. Ob kliku nanjo naj bo besedilo odstavka prečrtano (povezava pa - ne).
Spremenite prejšnjo nalogo tako, da po kliku na povezavo ta povezava izbriše iz odstavka (besedilo odstavka pa ostane prečrtano).
Podana je določena HTML tabela. Dodajte v to tabelo še en stolpec s povezavo. Ob kliku na to povezavo naj vrstica s to povezavo postane zelenega ozadja.
Spremenite prejšnjo nalogo tako, da prvi klik na povezavo obarva vrstico v zeleno ozadje, drugi klik pa to dejanje prekliče.
