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.
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>
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>
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…
Teşekkürler