jQuery addClass() , removeClass() , toggleClass() ve css()

Dostlar merhaba, bu dersimizde jQuery de belkide en çok kullanılan metodları anlatmaya çalışacağım. Bu metodlarımız tamemen Css ile ilgili. Peki bu metodlar neler; addClass() , removeClass() , toggleClass() ve css() metodlarımızdır.

Bu metodlarımız ile Seçtiğimiz Html elementlerine Css Class’ı atayabilir , silebilir , toggle değiştirebilir yada farklı Css özellikleri katabiliriz. Hiç zaman kaybetmeden ilk metodumuz olan addClass() ile dersimize başlayalım.

jQuery addClass()

jQuery addClass() metodu seçilen bir Html elementine tanımlanmış Css özelliğini tanımlamak için kullanılır. Şimdi bu metod ile tanımladığımız bir Css özelliğini Html elementimize ekleyelim.

Örneğimizde görüldüğü gibi addClass() metodunu kullanarak Css dosyamız içerisinde yer alan .blue classını Html elementimize aktardık.

jQuery removeClass()

jQuery removeClass() metodu ise addClass() metodunun tam terisi Html elementimizde tanımlı olan Css özelliğini siler. Örneğimizi inceleyelim.

Yukarıda removeClass() metodumuz ile Css özelliği tanımlı Html elementimizin özelliğini sildik.

jQuery toggleClass()

jQuery toggleClass() metodu ise daha önceki derslerde gördüğümüz gibi iki işlemi tek seferde yapar. Örneğin seçilen bir Html elementinin Css özelliği yoksa Css özelliği tanımlar eğer var ise siler. Şimdi örneğimizi inceleyelim.

Yukarıdaki canlı örneğimizi inceledi iseniz neye yaradığını çok rahat anlayacaksınız.

jQuery css()

jQuery css() metodu ise seçtiğimiz bir Html elementine Css özelliği atamaya yarar. Bunun için daha önceden tanımlanmış bir Css dosyasına yada özelliğine gerek yoktur. Yazım şekli aşağıdaki gibidir.

css("propertyname","value");

Şimdi bir örnek ile pekiştirelim.

Yukarıdaki örnekte seçtiğimiz bir Html elementine tanımlı olmayan bir Css özelliği ekledik. Ayrıca birden fazla özellikte tanımlamak mümkündür. Aşağıdaki örnek kodumuza bakalım.

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

Özelikleri arttırmak mümkündür. Yapılması gereken sadece araya virgül koymaktır.

Herkese kolay gelsin. Diğer bir derste görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares