Stilising av elementer i JavaScript
La oss si at vi har flere avsnitt:
<p>text1</p>
<p>text2</p>
<p>text3</p>
La oss gå gjennom disse avsnittene med en loop og på slutten av
hvert avsnitt legge til en lenke, ved klikk
på denne lenken vil teksten i avsnittet få
en viss stilising. For eksempel, kan teksten i avsnittet
bli gjennomstreket (dette gjøres med
CSS-egenskapen text-decoration).
La oss diskutere to nyanser ved en slik oppgave.
For det første, som allerede diskutert i tidligere leksjoner, bør du ikke endre stilene til avsnittene direkte via JavaScript - det vil være mye mer praktisk å legge på noen CSS-klasser.
For det andre, når du implementerer en slik oppgave venter det deg en overraskelse. For å forstå dens essens, la oss se på HTML-koden til avsnittene etter å ha lagt til lenker:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
La oss nå tenke oss at ved et klikk på lenken blir teksten i avsnittet gjennomstreket. Imidlertid, lenken i dette tilfellet også er en del av avsnittet og vil også bli gjennomstreket! Sannsynligvis er en slik effekt ikke ønsket for oss. Vi ønsker at teksten skal være gjennomstreket, men lenken - ikke.
For å løse problemet trenger du bare å omslutte
teksten i avsnittet med en span-tag, slik:
<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 gitt:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Legg til en lenke på slutten av hvert avsnitt, ved klikk på denne lenken skal teksten i avsnittet bli gjennomstreket (men lenken skal ikke).
Modifiser den forrige oppgaven slik at etter å ha klikket på lenken, fjernes denne lenken fra avsnittet (og teksten i avsnittet blir gjennomstreket).
Det er gitt en HTML-tabell. Legg til enda en kolonne i denne tabellen med en lenke. Ved klikk på denne lenken skal raden med denne lenken få grønn bakgrunn.
Modifiser den forrige oppgaven slik at det første klikket på lenken farger raden i grønn bakgrunn, og det andre klikket angrer denne handlingen.
