Elementu stilizēšana ar JavaScript
Pieņemsim, ka mums ir vairāki rindkopas:
html<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:
html<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:
html<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:
html<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.