jQuery Dersleri
jQuery Nedir?
jQuery Nedir?
jQuery Kurulumu
jQuery Kod Yapısı
jQuery ready Fonksiyonu
jQuery Nesne Seçimi
jQuery Fonksiyonlar

jQuery Efektleri
jQuery Gizle ve Göster
jQuery Kaydırma
jQuery Animasyonlar
jQuery callback
jQuery Toplu İşlemler

jQuery HTML
jQuery Bilgi Almak
jQuery Bilgi Değiştirme
jQuery Bilgi Ekleme
jQuery Veri Silme
jQuery'de CSS İşlemleri

jQuery Nesneler
jQuery Nesne Bulma/Seçme
jQuery Nesne Boyutları

jQuery AJAX
jQuery AJAX

Bağlantılar
HTML Dersleri
JavaScript Dersleri
CSS Dersleri
ASP Dersleri
PHP Dersleri
MySQL Komutları
jQuery Dersleri
Venus Programlama

Ana Sayfa Bize Ulaşın

jQuery'de CSS İşlemleri



Elementlerin CSS Stillerini ekleme, değiştirme, silme gibi işlemler için dört ana fonksiyonumuz vardır.

- addClass() belirtilen elemente stil ekler.
- removeClass() belirtilen elementteki stili kaldırır.
- toggleClass() belirtilen elementte stili değiştirir.
- css() belirtilen element için stil belirlememize yarar.

Daha önceden stil belirtilmemiş bir HTML elementine stil eklemek için addClass("stil adı") kullanırız. Stil adı, önceden CSS stil dosyamızda ya da stillerimiz arasında belirtilmiş olmalıdır.

Bir stile sahip html elementinden bu stili silmek için removeClass("stil adı") kullanırız. Silmek istediğimiz stil adını doğru belirtmiş olmamız gereklidir.

Zaten bir stile sahip elementin stilini değiştirmek içinse toggleClass("stil adı") kullanırız.

Aşağıdaki örneği inceleyin:

Benim rengim nedir?


Kodları uyguladığınızda 1. buton yazı rengini kırmızı yapar, 2. buton kırmızı olan yazı rengini tekrar siyaha dönüştürür, 3. butonsa stil ne olursa olsun mavi renge dönüştürür, tekrar tıklandığında stili geri siler.

NOT: Yukarıdaki örnekte CSS stil dosyası oluşturup şu stilleri yazmayı unutmayın:

div.kirmizi { color: #FF0000; }
div.mavi { color: #0000FF; }

jQuery css() Fonksiyonu

css("özellik","değer") şeklinde kullanılan bu fonksiyon, bir elementin stilleri ile ilgili eklemeler ve değişiklikler yapmamızı sağlar.

Örneğin bir paragrafın arkaplan rengini beyazdan sarıya dönüştüren bir uygulama yapalım.

Arkaplan rengi istiyorsan butona tıkla!



Peki birden fazla değişikliği tek bir fonksiyonla yapabilir miyiz? Evet! Bunun için {} işaretleri arasına "özellik":"değer" şeklinde, aralarında virgül olan bir ifade kullanabiliriz. Örneğin:

$("p").css({"background-color":"yellow","font-size":"200%"});

Üstteki örneği bir üst satırdaki gibi değiştirirseniz göreceğiniz şey hem yazının büyüdüğü hem arkaplanın sarı olduğudur.

Tüm hakları saklıdır. Lütfen kaynak belirtmeden sitenizde yayınlamayın. Web Sitesi © 2014