JQuery ile Html Elemanlarına Css Class Uygulama
JQuery kullanarak sayfamızdaki html nesnelerine bir veya birden fazla css class uygulayabilir, ya da uygulanmış olan class’ı iptal edebiliriz.
addClass metodu ile class(lar) uygulayabilir, removeClass ile de uygulanmış olan class’ı o etiketten kaldırabiliriz.
toggleClass metodu ise belirtilen class(lar) o elemanda varsa kaldırıp, yoksa uygulamayı sağlar.
Örnek olarak .cerceve ve .kirmizi isimlerinde iki css class’ımız olsun.
P etiketlerine .cerceve class’ını uygulayalım:
$("p").addClass("cerceve");
Şimdi de kutu1 id’li elemana her iki class’ı uygulayalım:
$("#kutu1").addClass("cerceve kirmizi");
Class veya class’ları aynı anda birden fazla elemana uygulamak istersek, seçici kısmına birden fazla eleman yazabiliriz:
Aşağıdaki örnekte hem p etiketleri, hem de kutu1’e yeni css class’ı uygulanıyor:
$("#kutu1, p").addClass("cerceve kirmizi");
removeClass() metodu ile uygulanmış bir class’ı kaldırma işi de benzer şekilde gerçekleştirilebilir.
$("p"). removeClass ("cerceve");
$("#kutu1"). removeClass ("cerceve kirmizi");
$("#kutu1, p"). removeClass ("cerceve kirmizi");
Kullanımı aynı olan toggleClass metodu ise belirtilen elemana belirtilen class zaten uygulanmış durumda ise o class’ı iptal eder, uygulanmamış ise uygular. Bir diğer ifade ile bir çalıştığında class(ları) uygularken, sonrakinde iptal eder.
$("p"). toggleClass ("cerceve");
$("#kutu1"). toggleClass ("cerceve kirmizi");
$("#kutu1, p"). toggleClass ("cerceve kirmizi");
jquery ile css class uygulama, html elemanlarına css class uygulama, apply css class to html elements, html etiketinden class kaldırma
KONU İLE İLGİLİ ÖRNEKLER
|
Örnek: Html nesnelerine class uygulama ve kaldırma
|
Kendin Dene
|
Kendin Dene butonuna tıkla, kodları incele, değiştir, sonucu gör...
Örneğin Css Kısmı:
<style type="text/css">
td{ padding:5px;}
.kutu{ background-color:#0F6; padding:3px;}
.kirmizi{
font-weight: bold;
color: #F00;
}
.cerceve{ border: 2px solid blue;}
</style>
Html Kısmı:
<div id="kutu1" class="kutu kirmizi">Kutu 1</div><br/>
<div id="kutu2">Kutu 2</div><br/>
<div id="kutu3" class="kutu cerceve">Kutu 3</div>
Kendin Dene butonuna tıklayarak kodların tamamını görebilirsin.
7669 kez okundu.