JQUERY ile Css Özelliklerini Değiştirme

Merhaba...

Jquery ile tıpkı javascript'te olduğu gibi bir elemanın CSS özelliklerine ulaşabilir , değiştirebilir ve yeni değerler ekleyebiliriz.  Bunun için .css() metodu kullanılır.  Örneğin bir elemanın css özelliğinin değerini aşağıdaki gibi alabiliriz.

<script>

      renk=$(".kutu").css("background-color"); 

</script>

Burada kutu class'lı elemanın arka plan rengi renk değişkenine aktarılmış olur.. 

TEK BİR CSS ÖZELLİĞİ DEĞİŞTİRME

Eğer bir elemanın sadece bir css özelliği değişecekse aşağıdaki yapıyı kullanabliriz. Özellik ile değer arasında virgül kullanılır.

<script>

     $(".kutu").css("background-color","red"); 

</script>

Yukarıda kutu class'lı elemanın arka plan rengi kırmızı (red) olur.

BİRDEN FAZLA CSS ÖZELLİĞİ DEĞİŞTİRME

Bir elemanın birden fazla css özelliği değişecekse yada eklenecekse aşağıdaki yapıyı kullanabliriz. CSS parantezinin içerisine ayrıca süslü { } parantezler açılır ve  Özellik değer ikilisi tıpkı CSS'te oldupu gibi ":" ile atanırken , farklı özellikler birbirinden virgül ile ayrılır.

<script>

    $(".kutu").css{("background-color":"red","font-size":"25px"});

</script>

Yukarıda kutu class'lı elemanın arka plan rengi kırmızı (red) olurken , yazı boyutu 25px olacaktır. Bu şekilde istenildiği kadar özellik eklenebilir.. 

Jquery kodlarının çalışması için scriptlerden önce jquery bağlantısını yapmayı unutmayın...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> 

Görüşmek üzere..