Stijlen van elementen in JavaScript
Stel dat we meerdere alinea's hebben:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Laten we deze alinea's doorlopen met een lus en aan het einde
van elke alinea een link toevoegen, waarop bij het klikken
er een zekere stijl aan de tekst van de alinea wordt toegevoegd.
Bijvoorbeeld, de tekst van de alinea
wordt doorgestreept (dit doet de
CSS-eigenschap text-decoration).
Laten we twee nuances van zo'n taak bespreken.
Ten eerste, zoals al besproken in eerdere lessen, moet je de stijlen van de alinea niet rechtstreeks via JavaScript veranderen - het is veel handiger om CSS-classes toe te voegen.
Ten tweede, bij het implementeren van zo'n taak wacht je een verrassing. Om de essentie ervan te begrijpen, laten we kijken naar de HTML-code van de alinea's na het toevoegen van de links:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Stel je nu voor dat bij het klikken op de link de tekst van de alinea doorgestreept wordt. Echter, de link is in dit geval ook een deel van de alinea en zal ook doorgestreept worden! Waarschijnlijk is zo'n effect niet wat we willen. We willen dat de tekst doorgestreept wordt, maar de link niet.
Om het probleem op te lossen, hoef je alleen maar
de tekst van de alinea in een span-tag te wrappen, zoals dit:
<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>
De volgende HTML-code is gegeven:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Voeg aan het einde van elke alinea een link toe, waarop bij het klikken de tekst van de alinea doorgestreept wordt (maar de link niet).
Pas de vorige taak zo aan dat na het klikken op de link deze link verwijderd wordt uit de alinea (en de tekst van de alinea doorgestreept wordt).
Er is een HTML-tabel gegeven. Voeg aan deze tabel nog een kolom toe met een link. Bij het klikken op deze link moet de rij met deze link een groene achtergrond krijgen.
Pas de vorige taak zo aan dat de eerste klik op de link de rij groen kleurt, en de tweede klik deze actie ongedaan maakt.
