JavaScript-də elementlərin stilizasiyası
Tutaq ki, bizim bir neçə abzasımız var:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Gəlin bu abzasları tsikl ilə gəzək və hər bir
abzasın sonuna bir keçid əlavə edək, kliklənəndə
abzasın mətninə bəzi stilizasiya əlavə olunsun.
Məsələn, abzasın mətni üstüxətli olacaq (bunu
CSS xassəsi text-decoration edir).
Gəlin belə bir tapşırığın iki nüansını müzakirə edək.
Birincisi, əvvəlki dərslərdə müzakirə olunduğu kimi, abzasların stillərini birbaşa JavaScript vasitəsilə dəyişdirməməlisiniz - CSS sinifləri əlavə etmək daha rahat olardı.
Ikincisi, belə bir tapşırığı həyata keçirərkən sizi bir sürpriz gözləyir. Onun mahiyyətini anlamaq üçün gəlin keçidlər əlavə edildikdən sonra abzasların HTML koduna baxaq:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Indi təsəvvür edək ki, keçidə kliklənəndə abzasın mətni üstüxətli olacaq. Lakin, keçid bu halda abzasın bir hissəsidir və o da üstüxətli olacaq! Yəqin ki, belə bir effekt bizə lazım deyil. Biz istəyirik ki, mətn üstüxətli olsun, amma keçid - olmasın.
Problemi həll etmək üçün sadəcə olaraq
abzasın mətnini span teqinə qablaşdırmaq lazımdır, belə:
<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>
Aşağıdaki HTML kodu verilmişdir:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Hər bir abzasın sonuna bir keçid əlavə edin ki, klikləndikdə abzasın mətni üstüxətli olsun (amma keçid - olmasın).
Əvvəlki tapşırığı elə dəyişin ki, keçidə kliklənəndə həmin keçid abzasdan silinsin (və abzasın mətni üstüxətli olsun).
Müəyyən bir HTML cədvəli verilmişdir. Bu cədvələ bir keçid olan başqa bir sütun əlavə edin. Bu keçidə kliklənəndə həmin keçidin olduğu sıra yaşıl fon rənginə çevrilsin.
Əvvəlki tapşırığı elə dəyişin ki, keçidə ilk klik sıranı yaşıl fona boyasın, ikinci klik isə bu əməliyyatı ləğv etsin.
