jQuery ile css değiştirme

Merhaba arkadaşlar bugün html nesnelerimize jquery css'lere müdahele etmeyi göstericem jquery'nin bu özelliği sayesinde direkt olarak nesnelerimizin css özelliklerini değiştirebiliriz.

Mesela bir div'imiz olsun bu div'imizin özelliklerini biz sonradan değiştirelim, Peki nasıl değiştiricez ?

jQuery bunun için bize basit bir fonksiyon hazırlamış ".css()" bu fonksiyon sayesinde istediğimiz nesnenin css özelliğini değiştirebiliriz.

Mesela

<style>
    width:100px;
    height:100px;
    background-color:#CCC;
</style>


<a href="#" id="tik">Tikla</a>

<div id="kare"></kare>

dedik ve standart bir div oluşturduk. Şimdi bu div'in özelliklerini jquery fonksiyonumuz ile değiştirelim.

<script>
    $(document).ready(function(){
		$("#tik").click(function(){
			$("#kare").css({
				"width":"200px",
				"height":"500px",
				"background-color":"#000"
				});
			})	
			
    });
</script>

Dedik ve linke tıklandığı an divimizin css özellikleri değişecektir.
Demo olarak incelemek için tıklayınız.

Peki bu özellik sadece buna mı yarar ? Tabiki hayır.
Ben belki o nesnenin istediğim css değerini öğrenmek istiyorum ve ona göre işlem yapmak istiyorum, bu fonksiyon sayesinde buda mümkün kullanımında ise hiçbir değişiklik yok sadece değer girmiyoruz aynen devam.

$("#tik").click(function(){
     var deger = $("#kare").css("width");
     alert(deger);			
})

dersek bize seçtiğimiz nesnenin css'te tanımlı genişlik değerini verecektir.
Bununda demosuna buradan ulaşabilirsiniz.