Styling af elementer med JavaScript
Lad os sige, at vi har flere afsnit:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Lad os gennemgå disse afsnit i en løkke og tilføje
et link i slutningen af hvert afsnit. Ved at klikke
på linket vil afsnittets tekst blive tilføjet en
vis styling. For eksempel vil afsnittets tekst
blive streget over (dette gøres med
CSS egenskaben text-decoration).
Lad os diskutere to nuancer ved en sådan opgave.
For det første, som allerede diskuteret i tidligere lektioner, bør du ikke ændre afsnittenes styling direkte via JavaScript - det vil være meget mere bekvemt at tilføje nogle CSS-klasser.
For det andet, ved implementering af en sådan opgave venter der dig en overraskelse. For at forstå dens essens, lad os se på HTML-koden for afsnittene efter tilføjelse af links:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Forestil dig nu, at når der klikkes på linket, bliver afsnittets tekst streget over. Imidlertid er linket i dette tilfælde også en del af afsnittet og vil også blive streget over! Sandsynligvis er en sådan effekt ikke ønsket for os. Vi ønsker, at teksten bliver streget over, men linket - ikke.
For at løse problemet skal du blot indpakke
afsnittets tekst i et span-tag, sådan her:
<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>
Følgende HTML-kode er givet:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Tilføj et link i slutningen af hvert afsnit. Ved klik på linket skal afsnittets tekst streges over (men linket skal ikke).
Modificer den forrige opgave, så linket efter klik bliver fjernet fra afsnittet (og afsnittets tekst bliver streget over).
Der er givet en HTML-tabel. Tilføj endnu en kolonne til denne tabel med et link. Ved klik på dette link skal rækken med dette link få en grøn baggrund.
Modificer den forrige opgave, så det første klik på linket farver rækken i grøn baggrund, og det andet klik annullerer denne handling.
