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:
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: