- Katılım
- 15 Ara 2019
- Mesajlar
- 11
- Beğeniler
- 3
- İletişim
JQuery ile Html Etiketlerine Css Class Uygulama
JQuery kullanarak sayfa içerisindeki html objelerine bir hatta birden çok css class uygulanabilir ya da uygulanmış olan class’ı silebilirsiniz.
addClass metodu ile class(lar) uygulayabilir, removeClass ile de uygulanmakta olan class’ı o elemandan kaldırabiliriz.
toggleClass metodu ise belirtilmekte olan class(lar) o etiket içerisinde var ise kaldırıp, yok ise uygulamayı sağlamaktadır.
Bu konuya diğer dersimizde örneklerle değineceğim.
Örnek vermek gerekirse .border ve .sari isimlerinde iki css class’ımız olsun.
P etiketlerine .border class’ını uygulayalım:
Şimdi ise kutu1 id’li etikete her iki class’ı uygulayalım:
Class veya class’ları aynı anda birden fazla elemana uygulamak istersek, seçici kısmına birden fazla eleman yazabiliriz:
Aşağıdaki örnek içerisinde hem p elemanları, hem de kutu1’e yeni css class’ı uygulayalım:
removeClass() metodu ile uygulanmış bir class’ı kaldırma işlemi de benzer biçimde uygulanabilir.
Kullanım tarzı aynı olan toggleClass metodu ise belirtilmiş olan etikete belirtilen class zaten uygulanmıl bir durumdaysa o class’ı iptal etme işlemi sağlar, uygulanmamış bir durumda ise uygular.
Alıntıdır...
JQuery kullanarak sayfa içerisindeki html objelerine bir hatta birden çok css class uygulanabilir ya da uygulanmış olan class’ı silebilirsiniz.
addClass metodu ile class(lar) uygulayabilir, removeClass ile de uygulanmakta olan class’ı o elemandan kaldırabiliriz.
toggleClass metodu ise belirtilmekte olan class(lar) o etiket içerisinde var ise kaldırıp, yok ise uygulamayı sağlamaktadır.
Bu konuya diğer dersimizde örneklerle değineceğim.
Örnek vermek gerekirse .border ve .sari isimlerinde iki css class’ımız olsun.
P etiketlerine .border class’ını uygulayalım:
Kod:
$("p").addClass("border");
Kod:
$("#kutu1").addClass("border sari");Aşağıdaki örnek içerisinde hem p elemanları, hem de kutu1’e yeni css class’ı uygulayalım:
Kod:
$("#kutu1, p").addClass("border sari");Kullanım tarzı aynı olan toggleClass metodu ise belirtilmiş olan etikete belirtilen class zaten uygulanmıl bir durumdaysa o class’ı iptal etme işlemi sağlar, uygulanmamış bir durumda ise uygular.
Kod:
$("p"). toggleClass ("cerceve");
$("#kutu1"). toggleClass ("cerceve kirmizi");
$("#kutu1, p"). toggleClass ("cerceve kirmizi");Alıntıdır...