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 жадвал берилган. Ушбу жадвалга яна бир ҳавола билан ustun қўшинг. Ушбу ҳаволага босилганда, ўша ҳавола билан сатр яшил фонга кирисин.

Олдинги вазифани шундай модификация қилингки, ҳаволага биринчи босилганда сатр яшил фонга кириб, иккинчи босилганда эса бу ҳаракат бекор қилинсин.