Elementų stilizavimas JavaScript

Tarkime, kad turime kelis pastraipas:

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

Perkelkime šias pastraipas ciklu ir į kiekvienos pastraipos pabaigą pridėkime nuorodą, paspaudus kurią pastraipos tekstui bus pritaikomas tam tikras stilius. Pavyzdžiui, pastraipos tekstas taps perbrauktas (tai daro CSS savybė text-decoration).

Aptarkime du tokios užduoties niuansus.

Pirma, kaip jau buvo aptarta ankstesnėse pamokose, nereikėtų keisti pastraipų stilių tiesiogiai per JavaScript - daug patogiau bus pridėti kokius nors CSS klases.

Antra, įgyvendinant tokią užduotį jūsų laukia tam tikras siurprizas. Norėdami suprasti jo esmę, pažiūrėkime į pastraipų HTML kodą po nuorodų pridėjimo:

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

Dabar įsivaizduokime, kad paspaudus nuorodą pastraipos tekstas bus perbrauktas. Tačiau nuoroda šiuo atveju taip pat yra pastraipos dalis ir taip pat bus perbraukta! Greičiausiai toks efektas mums nereikalingas. Mes norime, kad tekstas būtų perbrauktas, bet nuoroda - ne.

Norint išspręsti problemą, tereikia apgabalytti pastraipos tekstą span žyme, štai taip:

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

Duotas toks HTML kodas:

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

Pridėkite į kiekvienos pastraipos pabaigą nuorodą, paėjus kuri pastraipos tekstas bus perbrauktas (o nuoroda - ne).

Modifikuokite ankstesnę užduotį taip, kad po paspaudimo ant nuorodos ši nuoroda būtų pašalinta iš pastraipos (o pastraipos tekstas taptų perbrauktas).

Duota tam tikra HTML lentelė. Pridėkite į šią lentelę dar vieną stulpelį su nuoroda. Paspaudus šią nuorodą eilutė su šia nuoroda turėtų tapti žalia fono spalva.

Modifikuokite ankstesnę užduotį taip, kad pirmas paspaudimas ant nuorodos nudažytų eilutę žalia fono spalva, o antras paspaudimas atšauktų šį veiksmą.