Elementu stilizēšana ar JavaScript

Pieņemsim, ka mums ir vairāki rindkopas:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Apskatīsim šīs rindkopas ar ciklu un katrai rindkopai beigās pievienosim saiti, uz kuras noklikšķinot rindkopas tekstam tiks pievienota noteikta stilizācija. Piemēram, rindkopas teksts kļūs pārsvītrots (to dara CSS īpašība text-decoration).

Apspriedīsim divus šāda uzdevuma nianses.

Pirmkārt, kā jau apspriests iepriekšējās nodarbībās, nevajadzētu mainīt rindkopu stilus tieši caur JavaScript - daudz ērtāk būs uzlikt kādas CSS klases.

Otrkārt, realizējot šādu uzdevumu jūs sagaidīs zināms pārsteigums. Lai saprastu tā būtību, apskatīsim HTML kodu rindkopām pēc saišu pievienošanas:

<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>

Iedomāsimies tagad, ka uzspiežot uz saites rindkopas teksts tiks pārsvītrots. Tomēr, saite šajā gadījumā arī ir daļa no rindkopas un arī tiks pārsvītrota! Visticamāk, tāds efekts mums nav vajadzīgs. Mēs vēlamies, lai teksts būtu pārsvītrots, bet saite - nē.

Lai atrisinātu problēmu, vienkārši jāienes rindkopas teksts tagā span, šādi:

<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>

Dots šāds HTML kods:

<p>text1</p>
<p>text2</p>
<p>text3</p>

Pievienojiet katrai rindkopai beigās saiti, uz kuras noklikšķinot rindkopas teksts tiks pārsvītrots (bet saite - nē).

Modificējiet iepriekšējo uzdevumu tā, lai pēc noklikšķināšanas uz saites šī saite tiktu izdzēsta no rindkopas (bet rindkopas teksts kļūtu pārsvītrots).

Dota kāda HTML tabula. Pievienojiet šai tabulai vēl vienu kolonnu ar saiti. Uzspiežot uz šīs saites rinda ar šo saiti jākļūst zaļā fona.

Modificējiet iepriekšējo uzdevumu tā, lai pirmais noklikšķis uz saites krāsotu rindu zaļā fonā, bet otrais noklikšķis atceltu šo darbību.