JavaScript менен элементтерди стилдештирүү
Бизде бир нече абзац болсун:
<p>текст1</p>
<p>текст2</p>
<p>текст3</p>
Келгиле, бул абзацдарды цикл менен айлантып, ар бир абзацтын аягына шилтеме кошолу, ага басканда абзацтын текстине кандайдыр бир стил кошулат. Мисалы, абзацтын тексти сызылганга айланат (бул CSS касиети text-decoration менен жасалат).
Мынайында, мындай милдеттин эки нуктасын талкуулайлы.
Биринчиден, мурунку сабактарда талкуулангандай, абзацтардын стилдерин JavaScript аркылуу түздөн-түз өзгөртүү керек эмес - CSS класстарын кошуу ыңгайлуураак болот.
Экинчиден, мындай милдетти ишке ашырууда сизди бир аз күтүлбөгөн нерсе күтөт. Анын мәнисин түшүнүү үчүн, шилтемелер кошулгандан кийинки абзацтардын HTML кодуна карайлы:
<p>текст1<a href="">шилтеме</a></p>
<p>текст2<a href="">шилтеме</a></p>
<p>текст3<a href="">шилтеме</a></p>
Эми, шилтемени басканда абзацтын тексти сызылганын элестетели. Бирок, бул учурда шилтеме да абзацтын бир бөлүгү болуп саналат жана ал да сызылат! Бизге мындай таасир керек эмес деп ойлойбуз. Биз текст сызылсын, бирок шилтеме сызылбасын каалайбыз.
Көйгөйдү чечүү үчүн, абзацтын текстин span тегине ороп койсоңуз болот, мындайча:
<p><span>текст1</span><a href="">шилтеме</a></p>
<p><span>текст2</span><a href="">шилтеме</a></p>
<p><span>текст3</span><a href="">шилтеме</a></p>
Төмөнкү HTML код берилген:
<p>текст1</p>
<p>текст2</p>
<p>текст3</p>
Ар бир абзацтын аягына шилтеме кошуңуз, ага чыкылдаганда абзацтын тексти сызылсын (шилтеме сызылбасын).
Мурунку милдетти өзгөртүңүз, шилтемени баскандан кийин ал шилтеме абзацтан өчүрүлсүн (жана абзацтын тексти сызылганга айлансын).
Бир HTML таблица берилген. Бул таблицага дагы бир тилке кошуңуз, ага шилтеме менен. Ошол шилтемени басканда, шилтеме менен катар жашыл фонго айлансын.
Мурунку милдетти өзгөртүңүз, шилтеменин биринчи чыкылдашы катарды жашыл фонго боясо, экинчи чыкылдашы бул аракетти жокко чыгарсын.
