⊗jsPmPrES 481 of 505 menu

JavaScript-da elementlarni uslublash

Faraz qilaylik, bizda bir nechta abzatslar bor:

<p>matn1</p> <p>matn2</p> <p>matn3</p>

Keling, ushbu abzatslarni tsikl bilan aylantiramiz va har bir abzatsning oxiriga havola qo'shamiz, unga bosganda abzats matniga ma'lum bir uslub qo'shiladi. Masalan, abzats matni chizilgan holatga keladi (buni CSS xususiyati text-decoration amalga oshiradi).

Keling, bunday vazifaning iki nuansini muhokama qilaylik.

Birinchi navbatda, oldingi darslarda muhokama qilinganidek, abzatslarning uslubini to'g'ridan-to'g'ri JavaScript orqali o'zgartirish kerak emas - CSS klasslarini qo'llash ancha qulayroq bo'ladi.

Ikkinchidan, bunday vazifani amalga oshirishda sizni ma'lum bir sir kutmoqda. Uning mazmunini tushunish uchun havolalar qo'shilgandan keyingi abzatslarning HTML kodiga nazar solaylik:

<p>matn1<a href="">havola</a></p> <p>matn2<a href="">havola</a></p> <p>matn3<a href="">havola</a></p>

Endi tasavvur qilaylik, havolani bosish orqali abzats matni chiziladi. Biroq, havola bu holda abzatsning bir qismi hisoblanadi va u ham chiziladi! Ehtimol bunday effekt bizga kerak emas. Biz matn chizilishini xohlaymiz, lekin havola chizilmasin.

Muammoni hal qilish uchun shunchaki abzats matnini span tegi ichiga o'rab qo'yish kifoya, mana shunday:

<p><span>matn1</span><a href="">havola</a></p> <p><span>matn2</span><a href="">havola</a></p> <p><span>matn3</span><a href="">havola</a></p>

Quyidagi HTML kodi berilgan:

<p>matn1</p> <p>matn2</p> <p>matn3</p>

Har bir abzatsning oxiriga havola qo'shing, unga bosganda abzats matni chizilgan holatga keladi (lekin havola chizilmasin).

Oldingi vazifani shunday o'zgartiringki, havolani bosgandan so'ng ushbu havola abzatsdan olib tashlansin (va abzats matni chizilgan holatga keladi).

Ma'lum bir HTML jadvali berilgan. Ushbu jadvalga yana bir havola ustuni qo'shing. Ushbu havolani bosish orqali uning qatori yashil fon rangiga ega bo'lsin.

Oldingi vazifani shunday o'zgartiringki, havolaga birinchi marta bosilganda qator yashil rangga bo'yalsin, ikkinchi marta bosilganda esa bu harakat bekor qilinsin.

ruidmshiuzl