Elemek stílusának módosítása JavaScripttel
Tegyük fel, hogy több bekezdésünk is van:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Járjuk be ezeket a bekezdéseket egy ciklussal, és mindegyik
bekezdés végére helyezzünk el egy hivatkozást, amelyre
kattintva a bekezdés szövegéhez hozzáadódik
valamilyen stílus. Például a bekezdés szövege
áthúzottá válik (ezt a text-decoration
CSS tulajdonság teszi lehetővé).
Vegyünk szemügyre két részletet egy ilyen feladatban.
Először is, ahogyan azt az előző leckékben már megbeszéltük, nem szabad közvetlenül a JavaScript segítségével megváltoztatni a bekezdés stílusát – sokkal kényelmesebb lesz valamilyen CSS osztályt hozzárendelni.
Másodszor, egy ilyen feladat megvalósításakor egy meglepetés vár ránk. Hogy megértsük a lényegét, nézzük meg a bekezdések HTML kódját a hivatkozások hozzáadása után:
html<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Képzeljük el most, hogy a hivatkozásra kattintva a bekezdés szövege áthúzottá válik. Azonban a hivatkozás ebben az esetben szintén a bekezdés része, és ezért ő is áthúzottá válik! Valószínűleg ez a hatás nem kívánatos. Azt szeretnénk, hogy a szöveg áthúzott legyen, de a hivatkozás – ne.
A probléma megoldásához egyszerűen be kell csomagolni
a bekezdés szövegét egy span tagbe, így:
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>
A következő HTML kód adott:
html<p>text1</p>
<p>text2</p>
<p>text3</p>
Minden bekezdés végére helyezzen el egy hivatkozást, amelyre kattintva a bekezdés szövege áthúzottá válik (a hivatkozás viszont ne).
Módosítsa az előző feladatot úgy, hogy a hivatkozásra kattintás után az eltávolíttasson a bekezdésből (és a bekezdés szövege áthúzottá váljon).
Adott egy HTML táblázat. Adjon hozzá ehhez a táblázathoz még egy oszlopot hivatkozással. Erre a hivatkozásra kattintva az a sor, amelyikben a hivatkozás található, zöld háttérszínű legyen.
Módosítsa az előző feladatot úgy, hogy az első kattintás a hivatkozásra zöld háttérszínt eredményezzen a sorban, a második kattintás pedig visszavonja ezt a műveletet.