CSS CLASS EKLEME
Arkadaşlar şimdi bir divimiz var bu divimiz içindeki yazıyı 24 px büyüklüğünde yapacak bir komutla değerlendirilmiş. Bunun yanı sıra divimizle alakası olmayan .renk komutu ile atanmış birde rengimiz var. Bu rengi HTML kodlarımda hiç kullanmama rağmen bunu sayfama JQuery ile dahil edebilirim. Nasıl mı? .addClass komutum ile. Örnek üzerinden açıklarsam daha açıklayıcı olacağı için direkt olarak yukarıda açıklamasını yaptığım örneği kurgudan koda dökelim. İlk olarak 'divim' sınıfına sahip bir element oluşturup 24 px boyutunu veriyorum:
Deneme
Şimdide buna paralel bir renk komutu verelim fakat HTML yapısında bulunmayan bir değerliğe yani renk sınıfına sahip birşeye verelim:
Deneme
Şimdi çalıştırdığımızda hiçbir değişiklik olmayacaktır. Çünkü .renk değerliği hiçbir elemente atanmamıştır. Şimdi JQuery ile renk sınıfına sahip bir div ekliyorum:
<script>
$funtion(){
$('div').addClass('renk');
})
</script>
Yukarıdaki kodu yapımıza eklediğimizde şöyle bir görünüm verecektir:
Deneme
CSS CLASS SILME
Bu dersimizde ise var olan CSS Sınıflarını Silmeyi göstereceğim. Arkadaşlar bir class eklerken addClass methodunu kullandımız gibi silecekken de .removeClass komutunu kullanıyoruz. Şimdi arkadaşlar bir resmimiz olsun divimizin içinde ve buna border komutları atayalım. Normalde olması gereken resmin kenarlarında bir çizgidir fakat removeClass ile border atadığımız ve resmi kapsayan divi seçtiğimizde o div silinecek ve kuru bir resim kalacaktır.Hemen örnek üzerinden açıklayalım:
Yukarıdaki kodda olan resmin kenarında siyah renginde 3 pxlik bir çizgi olacaktır. Şimdi removeClass komutu ile divi silelim:
<script>
$funtion(){
$('div').removeClass('resim');
})
</script>
Yukarıdaki kodu çalıştırdığımızda normalde border gelmesi gerekirken sayfa açıldıktan sonra Jquery kodları devreye girip border sahibi olan divi siliyor. Bir kerede birden çok sınıf kaldırmak isterseniz:
<script>
$funtion(){
$('div').removeClass('resim, deneme, genel, ustmenu');
})
</script>
Şeklinde kullanabilirsiniz..
Kaynak:
http://yusufberki.com/css-siniflari-ekleme/
http://yusufberki.com/css-siniflari-silme/
