Gaya Elemen pada JavaScript
Katakan kita mempunyai beberapa perenggan:
<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
Mari kita ulangi perenggan ini dengan gelung dan tambahkan
pautan pada akhir setiap perenggan, apabila diklik
teks perenggan akan ditambah dengan
beberapa gaya. Sebagai contoh, teks perenggan
akan menjadi tercoret (ini dilakukan oleh
sifat CSS text-decoration).
Mari kita bincangkan dua nuansa tugas sedemikian.
Pertama, seperti yang telah dibincangkan dalam pelajaran sebelumnya, tidak sepatutnya mengubah gaya perenggan secara langsung melalui JavaScript - lebih mudah untuk menambahkan beberapa kelas CSS.
Kedua, apabila melaksanakan tugas sedemikian anda akan menghadapi beberapa kejutan. Untuk memahaminya mari kita lihat kod HTML perenggan selepas menambah pautan:
<p>teks1<a href="">pautan</a></p>
<p>teks2<a href="">pautan</a></p>
<p>teks3<a href="">pautan</a></p>
Sekarang bayangkan, apabila pautan diklik teks perenggan akan tercoret. Walau bagaimanapun, pautan dalam kes ini juga merupakan sebahagian daripada perenggan dan juga akan tercoret! Kemungkinan besar kesan sedemikian tidak kita mahukan. Kita mahu teks tercoret, tetapi pautan - tidak.
Untuk menyelesaikan masalah, kita hanya perlu membungkus
teks perenggan dalam tag span, seperti ini:
<p><span>teks1</span><a href="">pautan</a></p>
<p><span>teks2</span><a href="">pautan</a></p>
<p><span>teks3</span><a href="">pautan</a></p>
Diberi kod HTML berikut:
<p>teks1</p>
<p>teks2</p>
<p>teks3</p>
Tambahkan pautan pada akhir setiap perenggan, apabila diklik, teks perenggan akan tercoret (manakala pautan - tidak).
Ubah suai tugas sebelumnya supaya selepas mengklik pautan, pautan itu dipadamkan dari perenggan (dan teks perenggan menjadi tercoret).
Diberi beberapa jadual HTML. Tambahkan ke dalam jadual ini satu lajur lagi dengan pautan. Apabila pautan ini diklik, baris dengan pautan ini harus menjadi berlatar belakangkan hijau.
Ubah suai tugas sebelumnya supaya klik pertama pada pautan mewarnai baris dengan hijau, dan klik kedua membatalkan tindakan ini.
