Stilisering av element med JavaScript
Låt oss säga att vi har flera stycken:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Låt oss gå igenom dessa stycken med en loop och i slutet
av varje stycke lägg till en länk, vid klick
på vilken texten i stycket kommer att få
en viss styling. Till exempel kommer texten i stycket
att bli genomstruken (detta görs av
CSS-egenskapen text-decoration).
Låt oss diskutera två nyanser i denna uppgift.
För det första, som redan diskuterats i tidigare lektioner, bör du inte ändra stilarna för stycken direkt via JavaScript - det kommer att vara mycket bekvämare att lägga på några CSS-klasser.
För det andra, när du implementerar denna uppgift kommer du att möta en viss överraskning. För att förstå dess essens, låt oss titta på HTML-koden för styckena efter att ha lagt till länkar:
<p>text1<a href="">länk</a></p>
<p>text2<a href="">länk</a></p>
<p>text3<a href="">länk</a></p>
Föreställ dig nu att när du klickar på länken kommer texten i stycket att bli genomstruken. Men, länken i detta fall är också en del av stycket och kommer också att bli genomstruken! Sannolikt är en sådan effekt inte önskvärd för oss. Vi vill att texten ska vara genomstruken, men inte länken.
För att lösa problemet behöver du helt enkelt omsluta
texten i stycket med taggen span, så här:
<p><span>text1</span><a href="">länk</a></p>
<p><span>text2</span><a href="">länk</a></p>
<p><span>text3</span><a href="">länk</a></p>
Följande HTML-kod ges:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Lägg till i slutet av varje stycke en länk, vid klick på vilken texten i stycket kommer att bli genomstruken (men inte länken).
Modifiera den föregående uppgiften så att efter att ha klickat på länken så tas denna länk bort från stycket (och texten i stycket blir genomstruken).
En viss HTML-tabell ges. Lägg till i denna tabell ytterligare en kolumn med en länk. Vid klick på denna länk ska raden med denna länk få grön bakgrund.
Modifiera den föregående uppgiften så att det första klicket på länken färgar raden i grön bakgrund, och det andra klicket ångrar denna åtgärd.
