JavaScript'te Element Stilize Etme
Diyelim ki birkaç paragrafımız var:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Bu paragrafları bir döngü ile geçelim ve her bir paragrafın sonuna, tıklandığında paragraf metnine bir stil uygulayan bir bağlantı ekleyelim. Örneğin, paragraf metninin üstü çizili hale gelsin (bunu text-decoration CSS özelliği yapar).
Böyle bir görevin iki nüansını tartışalım.
İlk olarak, önceki derslerde de tartışıldığı gibi, stilleri JavaScript aracılığıyla doğrudan değiştirmemelisiniz - bunun yerine bazı CSS sınıfları eklemek çok daha uygun olacaktır.
İkinci olarak, böyle bir görevi uygularken sizi bir sürpriz bekliyor. Özünü anlamak için, bağlantılar eklendikten sonra paragrafların HTML koduna bir göz atalım:
<p>text1<a href="">link</a></p>
<p>text2<a href="">link</a></p>
<p>text3<a href="">link</a></p>
Şimdi, bağlantıya tıklandığında paragraf metninin üstünün çizileceğini düşünelim. Ancak, bu durumda bağlantı da paragrafın bir parçasıdır ve onun da üstü çizilecektir! Muhtemelen böyle bir etki istemiyoruz. Metnin üstünün çizilmesini, ancak bağlantının üstünün çizilmemesini istiyoruz.
Sorunu çözmek için, paragraf metnini bir span etiketi içine almak yeterlidir, şu şekilde:
<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ştir:
<p>text1</p>
<p>text2</p>
<p>text3</p>
Her paragrafın sonuna, tıklandığında paragraf metninin (bağlantı değil) üstünü çizecek bir bağlantı ekleyin.
Önceki görevi, bağlantıya tıklandıktan sonra bu bağlantının paragraftan kaldırılması (ve paragraf metninin üstünün çizilmesi) şeklinde değiştirin.
Bir HTML tablosu verilmiştir. Bu tabloya bir bağlantı içeren bir sütun daha ekleyin. Bu bağlantıya tıklandığında, bağlantının bulunduğu satır yeşil arka plan rengine dönüşmelidir.
Önceki görevi, bağlantıya ilk tıklandığında satırı yeşil arka plana boyayan, ikinci tıklamanın ise bu işlemi iptal ettiği şekilde değiştirin.
