Styling Elemen dengan JavaScript

Misalkan kita memiliki beberapa paragraf:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Mari kita ulangi paragraf-paragraf ini dengan loop dan di akhir setiap paragraf tambahkan sebuah tautan, saat diklik teks paragraf akan diberikan beberapa gaya. Misalnya, teks paragraf akan menjadi tercoret (ini dilakukan oleh properti CSS text-decoration).

Mari kita bahas dua nuansa dari tugas seperti itu.

Pertama, seperti yang telah dibahas dalam pelajaran sebelumnya pelajaran, sebaiknya tidak mengubah gaya paragraf secara langsung melalui JavaScript - akan jauh lebih nyaman untuk menambahkan beberapa kelas CSS.

Kedua, saat mengimplementasikan tugas seperti itu, Anda akan menemukan kejutan tertentu. Untuk memahaminya intinya, mari kita lihat kode HTML paragraf setelah menambahkan tautan:

<p>teks1<a href="">tautan</a></p>
<p>teks2<a href="">tautan</a></p>
<p>teks3<a href="">tautan</a></p>

Sekarang bayangkan, ketika tautan diklik teks paragraf akan tercoret. Namun, tautan dalam hal ini juga merupakan bagian dari paragraf dan juga akan tercoret! Kemungkinan besar efek seperti itu tidak kita inginkan. Kita ingin teksnya tercoret, tetapi tautannya - tidak.

Untuk menyelesaikan masalahnya, kita hanya perlu membungkus teks paragraf dalam tag span, seperti ini:

<p><span>teks1</span><a href="">tautan</a></p>
<p><span>teks2</span><a href="">tautan</a></p>
<p><span>teks3</span><a href="">tautan</a></p>

Diberikan kode HTML berikut:

<p>teks1</p>
<p>teks2</p>
<p>teks3</p>

Tambahkan di akhir setiap paragraf sebuah tautan, yang saat diklik, teks paragraf akan dicoret (tetapi tautannya - tidak).

Modifikasi tugas sebelumnya sehingga setelah mengeklik tautan, tautan tersebut dihapus dari paragraf (dan teks paragraf menjadi tercoret).

Diberikan sebuah tabel HTML. Tambahkan ke tabel ini kolom lain dengan tautan. Saat diklik pada tautan ini, baris dengan tautan ini harus menjadi berlatar belakang hijau.

Modifikasi tugas sebelumnya sehingga klik pertama pada tautan akan mewarnai baris dengan latar hijau, dan klik kedua membatalkan tindakan ini.