Derinlemesine yazılım eğitimleri için kanalımı takip edebilirsiniz...

jQuery – Bir Class’ın Style Yapısına Müdahale

Önceki yazılarımda bir id ve tagın jQuery ile style yapısının nasıl değiştirildiğini incelemiştik.Şimdi ise bir Class yapısının style yapısını değiştirmeyi inceleyeceğiz.

Yazımızın ana konusunu şekillendirirken aşağıdaki HTML yapıdan yararlanacağız.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="gorunumclass">Merhaba, Jüpiter</div>
<input type="submit" value="Değiştir" />
</body>
</html>

Burada gördüğünüz gibi “gorunumclass” isminde bir Class yapısına sahip bir “<div>” nesnemiz ve bir adette “Değiştir” isminde butonumuz mevcut.Butonumuza tıklandığı zaman jQuery ile “gorunumclass” Class değerine sahip HTML nesnelerin style yapılarını değiştireceğiz.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function Degistir()
{
		$(".gorunumclass").css("width","355px");
		$(".gorunumclass").css("color","#C03");
		$(".gorunumclass").css("border-style","ridge");
		$(".gorunumclass").css("font-size","24px");
	}
</script>
</head>
<body>
<div class="gorunumclass">Merhaba, Jüpiter</div>
<input type="submit" value="Değiştir" onclick="Degistir();" />
</body>
</html>

Yukarıdaki kod parçacığında “gorunumclass” Class değerine sahip HTML nesnelerinin style yapılarına jQuery ile müdahale etmiş olduk.Şimdide aşağıdaki kod parçacığını inceleyelim.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-2.0.2.min.js"></script>
<script type="text/javascript">
function Degistir()
{
		$(".gorunumclass").css("width","355px");
		$(".gorunumclass").css("color","#C03");
		$(".gorunumclass").css("border-style","ridge");
		$(".gorunumclass").css("font-size","24px");
	}
</script>
</head>
<body>
<div class="gorunumclass">Merhaba, Jüpiter</div>
<span class="gorunumclass">Merhaba, Satürn</span>
<div class="gorunumclass">Merhaba, Uranüs</div>
<p class="gorunumclass">Merhaba, Neettün</p>
<input type="submit" value="Değiştir" onclick="Degistir();" />
</body>
</html>

Burada da gördüğünüz gibi birden fazla “gorunumclass” Class değerine sahip nesnemiz mevcuttur.jQuery ile Class yapılarına müdahale ettiğimiz için “Degistir” isimli fonksiyonumuz tetiklendiği zaman tüm “gorunumclass” Class değerine sahip HTML nesneleri(farklı nesnelerde olsa) bu müdahaleden etkileneceklerdir.

jQuery – Bir ID’nin Style Yapısına Müdahale başlıklı makalemizden hatırlarsanız eğer, birden fazla aynı id değerine sahip HTML nesneleri teknik olarak mümkün olamadığından dolayı jQuery mimarisi ilk eşleşen id değerinin style yapısına müdahale ediyordu.Anlatmak istediğim Class yapısında böyle bir durum söz konusu değildir, bilakis tüm nesneler style değişikliğinden etkilenecektir.

İyi çalışmalar dilerim…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. orhan fırat dedi ki:

    bu koda göre css verdik tamam elinize sağlık fakat hover i ne şekilde verecez bilemedim 🙂 yardımcı olursanız sevinirim

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

*