Tabii ki bunu da yapmanın bir çok yolu var öncelikle eski düz Javascript ile şu satırlardan birini click event iniz içine koyarak id si "eren" olan bir html öğesinin üstünde işlem yapabilirsiniz, ne işe yaradıklarını aşağıda açıklayacağım:
document.getElementById("eren").className = "yeniStil";
document.getElementById("eren").className += " ekstraStil";
document.getElementById("eren").className = document.getElementById("eren").className.replace( /(?:^|\s)silinecekStil(?!\S)/g , '' );
if ( document.getElementById("eren").className.match(/(?:^|\s)kontrolStil(?!\S)/) ){ islemYap(); }
İlk satır eren id sine sahip öğenin tüm sınıflarını silip, yerlerine "yeniStil" adında bir sınıf koyuyor. İkinci satır hiçbir şeyi silmeden, "ekstraStil" adında bir sınıf (class) ekliyor. Üçüncü satır ise eren id li öğenin sınıfları içerisinde var ise "silinecekStil" adlı sınıfı siliyor. Dördüncü satır ise eren id li öğede eğer "kontrolStil" adlı class var ise "islemYap()" fonksiyonunu çalıştırıyor. Dediğim gibi bunlarla işlem yapmak istiyorsanız ya click event inizin içine ya da başka fonksiyonların içine koyabilirsiniz.
IE 10 da çalışmasa da normalde modern tarayıcılarda artık yeni HTML5 sonrası Javascript kütüphaneleri mevcut, bunlardan classList sayesinde bu işlemleri daha kısa kodlar ile uygulayabilirsiniz:
document.getElementById("eren").classList.add('ekstraStil');
document.getElementById("eren").classList.remove('silinecekStil');
if ( document.getElementById("eren").classList.contains('kontrolStil') ) { islemYap(); }
document.getElementById("eren").classList.toggle('degistirStil');}
Yine yukarıda bahsettiğim gibi, ilki yeni eklemek, ikincisi silmek, üçüncüsü ise var mı yok mu kontrol edip ona göre işlem yapmak için olan satırlardır. Dördüncü satırdaki "toggle" ise eğer yok ise eklemek var ise silmek için var olan bir metoddur.
Tahmin edebileceğiniz üzere, kolaylıkların nasıl çalışması gerektiği üzerine genel bir fikir birliği olduğu için Jquery ile de bu işlemleri yapmak pek de farklı değil:
$('#eren').addClass('ekstraStil');
$('#eren').removeClass('silinecekStil');
if ( $('#eren').hasClass('kontrolStil') ) { islemYap(); }
$('#eren').toggleClass('degistirStil');
Bu satırların anlamı da bir öncekilerle aynıdır: ilki yeni eklemek, ikincisi silmek, üçüncüsü ise var mı yok mu kontrol edip ona göre işlem yapmak, dördüncüsü de yok ise eklemek var ise çıkarmak içindir.