Jquery ve CSS Özellikleri

Bildiğiniz üere, Jquery ve CSS içiçe kullanılan teknolojilerdir. Bu yazımda Jquery ile CSS özelliklerini değiştirmeyi, daha doğrusu css özelliklerine nasıl müdahele edilebileceğini göstermeye çalışacağım.

CSS Fonksiyonu

Jquerynin belkide en güzel fonksiyonu ile sizi tanıştırayım. Bu fonksiyon ile herhangi bir elementin css özelliklerine erişebilip onları değiştirebiliyoruz.

Saydadaki ilk <div> elementinin background değerine ulaşalım ;

$("div:first").css("background")

Değere ulaştık fakat bu sizi tatmin etmeyebilir, şimdi de onu değiştirelim ;

$("div:first").css("background","green")

CSS özelliğini yukarıdaki gibi değiştirebilirsiniz, ayrıca birden fazla CSS özelliğini değiştirmek isterseniz aşağıdaki gibi bir kod kullanabilirsiniz ;

$("div:first").css({
   background : "green",
   border : "1px solid yellow",
   width : "200px"
});

CSS fonksiyonu ile yapabileceklerinizin sınırı yoktur, istediğiniz kadar CSS özelliği değiştirebilirsiniz. Seçin ve değiştirin gerisini Jquery halleder.

width Fonksiyonu

Bu fonksiyon seçtiğiniz elementin genişlik değerini size döndürecektir ;

$("div:first").width()

Ya da seçtiğiniz elementin genişlik değerini değiştirebilirsiniz ;

$("div:first").width(300)

Bu şekilde sayfadaki ilk div elementinin genişliği 300px olarak ayarlanacaktır.

width fonksiyonununa benzer iki farklı fonksiyon daha bulunmaktadır : innerWidth ve outerWidth

innerWidth Fonksiyonu seçtiğiniz elementin padding değeri ile beraber genişliğini döndürür.

innerWidth = width + padding

outerWidth Fonksiyonu ise seçtiğiniz elementin padding ve border değerleri ile beraber genişliğini döndürür.

outerWidth = width + padding + border

height Fonksiyonu

Bu fonksiyon aynı width fonksiyonu gibi çalışmaktadır, tek farkı genişlik yerine yükseklik değerini döndürmesidir. width fonksiyonu ile ilgili yazdığım tüm özellikler height fonksiyonu için de geçerlidir.

innerHeight ve outerHeight gibi türevleri de mevcuttur.

offset Fonksiyonu

Bu fonksiyon ile seçtiğimiz elementin üstten ve soldan ne kadar uzaklıkta olduğunu öğrenebiliyoruz, ayrıca bu değerleri değiştirebiliyoruz.

koordinat = $("p").offset()
koordinat.left // Soldan uzaklığı verir
koordinat.top // Üstten uzaklığı verir

Seçtiğiniz elementin koordinatlarını değiştirmek isterseniz fonksiyona aşağıdaki gibi parametre girmelisiniz ;

koordinat = $("div").offset({
   top : 100,
   left : 200
})

position Fonksiyonu

Positon fonksiyonu da aynı offset fonksiyonu gibi seçtiğiniz elementin koordinatlarını geri döndürür, fakat bu fonksiyon ile koordinatları değiştiremiyoruz.

koordinat = $("p").position()
koordinat.left // Soldan uzaklığı verir
koordinat.top // Üstten uzaklığı verir

Bu fonksiyonlarla ilgili küçük bir örnek yapalım, sayfada iki adet link bulunsun; birisiyle arkaplan renk değişikliği yapalım ve diğeriyle ise seçtiğimiz elementin koordinatlarını değiştirelim.

$("a.maviYap").click(function(){
   $("div").css("background","#0099FF");
});
$("a.offsetAyarla").click(function(){
   $("div").offset({
      top : 200,
      left : 100
   });
});

Sonuca buradan bakabilirsiniz, buradan da indirip inceleyebilirsiniz.

Benzer Yazılar

Yorumlar

  • Hasan Ugur , 19 Mart 2012 - 20:04:10

    Güzel bir paylaşım olmuş tşk ederim.

    Cevapla
  • Bilgisayar Tornacısı , 04 Nisan 2014 - 03:16:52

    Memlekette önüne gelen bilgisayar mühendisiyim diyor kendine html ve css ile iki satır bir şey yazıyorlar mühendis oluyorlar bilgisayar mühendisi c++ assembler vb. yazmıyayım burda bunları evbere bilir böyle basit işler ile uğraşmaz

    Cevapla
    • kornacı , 12 Haziran 2015 - 22:19:01

      Bilgisayar mühendisinin neyle uğraşacağı konusunda neden böyle bir iddian var ki Bilgisayar Tornacısı. Hangi analize, hangi veriye dayanarak böyle atıp-tuttun? Bilgisayar mühendisi olup da keyfi öyle istediği için, hoşuna gittiği için, ya da kolaycı olduğu için, ya da o alanda çok özel bir şeyler geliştirmek için de web programlamayla ilgilenebilir. Buraya birileri yararlansın diye iki satır html, css yazmış ise, html ve css bilgisinin, hatta bilgisayar bilgisinin bu kadar olduğuna nasıl kanaat getirdin anlamadım. Çok saçma sapan bir yorum da bulunmuşsun.

      Cevapla
    • eray , 13 Haziran 2016 - 21:45:27

      işte bunun gibi mallar iki satır kod yazamadığı için böyle salak salak konusur :D
      senden anca tornacı olur :D

      Cevapla

Yorum Yazın

Su elementleri kullanabilirsiniz : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Arama
RSS
Beni yukari isinla