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

jQuery – Bir Nesnenin CSS Özelliklerine Ulaşmak

jQuery ile bir nesnenin html tagının, id özelliğinin ve class değerinin style yapılarına müdahale etmeyi belirtilen adreslerdeki makalelerde değinmiştik.Bu yazımızda ise bir nesnenin CSS özelliğine ulaşmayı ele alacağız.

Yazımıza direkt olarak aşağıdaki şemadan giriş yapmak istiyorum.

<html>
<head>
</head>
<body>
<div style="font-size:14px;"></div>
</body>
</html>

Yukarıdaki kod bloğunda gördüğünüz “div” nesnesinin “font-size” özelliği “14px” olarak ayarlanmıştır.Şimdi bu nesnenin bu CSS özelliğini jQuery ile okuyalım.

<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">
$("document").ready(function(e) {
    var CSSDegeri = $("div").css("font-size");
	alert(CSSDegeri);
});
</script>
</head>
<body>
<div style="font-size:12px;"></div>
</body>
</html>

Gördüğünüz gibi sayfa yüklendiği esnada “$” operatörü sayesinde “div” tagımıza ulaşıyor ve “css” metoduyla “font-size” özelliğinin değerini elde ediyoruz.

Chrome tarayıcısında bu kodu çalıştırırsak eğer aşağıdaki sonucu verecektir.
jQuery CSS ulaşmak

Eğer “div” nesnemizin “font-size” özelliğine “px” tipinden değilde “pt” tipinden bir değer verirsek sonuc yine “px” tipinden elde edilecektir.

Örnek olarak,

<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">
$("document").ready(function(e) {
    var CSSDegeri = $("div").css("font-size");
	alert(CSSDegeri);
});
</script>
</head>
<body>
<div style="font-size:12pt;"></div>
</body>
</html>

jQuery CSS ulaşmak 2
Gördüğünüz gibi “12pt” değerine karşılık olarak “16px” değeri gelmektedir.

Burada değinmek istediğim “pt” değerini “px” tipinden elde edebiliyor olmamızdır.

Örneklerimizi farklı CSS özellikleriyle zenginleştirmek gerekirse eğer,

<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">
$("document").ready(function(e) {
    var CSSDegeri = $("div").css("font-size");
    var CSSDegeri2 = $("div").css("width");
	alert(CSSDegeri2);
});
</script>
</head>
<body>
<div style="font-size:12pt;width:150px;"></div>
</body>
</html>

jQuery CSS ulaşmak 3
Gördüğünüz gibi istediğimiz CSS özelliğinin değerine erişebilmekteyiz.

Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar diliyorum…

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Kamil Yasin Ablay dedi ki:

    Teşekkürler

Bir cevap yazın

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