JavaScript-те элементтерді стильдеу

Бізде бірнеше абзац бар делік:

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

Осы абзацтарды цикл арқылы айналып шығып, әрбір абзацтың соңына сілтеме қосайық, оны басқан кезде абзац мәтініне белгілі бір стильдік өзгеріс енгізіледі. Мысалы, абзац мәтіні сызылғанға айналады (мұны text-decoration CSS қасиеті жасайды).

Мұндай тапсырманың екі нюансын талқылайық.

Біріншіден, алдыңғы сабақтарда айтылғандай, абзацтардың стильдерін тікелей JavaScript арқылы өзгертудің қажеті жоқ - оларға қандай да бір CSS сыныптарын қосу әлдеқайда ыңғайлы болады.

Екіншіден, мұндай тапсырманы орындаған кезде сізді белгілі бір таңдау күтіп тұр. Оның мәнін түсіну үшін, сілтемелерді қосқаннан кейінгі абзацтардың HTML кодына назар салайық:

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

Енді елестетіп көрейік, сілтемені басқан кезде абзац мәтіні сызылады. Алайда, сілтеме бұл жағдайда абзацтың бір бөлігі болып табылады және ол да сызылады! Бәлкім бізге мұндай әсер қажет емес. Біз мәтіннің сызылуын қалаймыз, бірақ сілтеме сызылмауы керек.

Мәселені шешу үшін абзац мәтінін span тегіне орау керек, мына түрде:

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

Мына HTML коды берілген:

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

Әрбір абзацтың соңына сілтеме қосыңыз, оны басқан кезде абзац мәтіні сызылғанға айналады (ал сілтеме - айналмайды).

Алдыңғы тапсырманы өзгертіңіз, сонда сілтемені басқаннан кейін сол сілтеме абзацтан жойылады (ал абзац мәтіні сызылғанға айналады).

Белгілі бір HTML кестесі берілген. Осы кестеге тағы бір сілтемесі бар бағана қосыңыз. Осы сілтемені басқан кезде, сол сілтемесі бар қатар жасыл фонға ие болуы керек.

Алдыңғы тапсырманы өзгертіңіз, сонда сілтемені бірінші рет басқанда қатар жасыл фонға боялады, ал екінші рет басқанда бұл әрекетті болдырмайды.