Bu yazımızda, jQuery "css sınıf" (class) özelliklerine kısaca göz atıp, konu ile ilgili bir uygulama yapacağız.
CSS Fonksiyonları:
- .css() //Nesnenin sahip olduğu stil(style) özellikleri öğrenilebilir ve değiştirilebilir.
- .addClass(class) //Bir nesneye css sınıf (class) eklemeyi sağlar.
- .hasClass(class) //Bir nesnenin belirtilen css sınıfa (class) sahip olup olmadığını kontrol eder (true, false).
- .removeClass() //Bir nesneden belirtilen css sınıfını (class) kaldırır.
- .toggleClass(class) //Bir nesneye ilgili sınıfı ekler ve kaldırır.
Uygulama:
Uygulamamızda, ".addClass()" özelliğini kullanarak "image" üzerine sınıf eklemesi yapacağız.
Not: sınıf içerisinde "box-shadow" özelliği vardır, bu özellik "CSS3" özelliklerindendir, IE9 öncesi IE tarayıcıları bu özelliği desteklemez, diğer modern tarayıcılar destekler (Önerimiz: Mozilla Firefox, Chrome, Comodo, Safari vb.)
Aşağıdaki resmi tıkladığınızda, resme "addClassImg" sınıfı eklenecek.
HTML yapısı:
<div id="area">
<img id="imgAttr" src="gitar.png" width="64" height="64" alt="Gitar alt" title="Gitar başlık" />
</div>
CSS yapısı:
.addClassImg{
border:2px solid orange;
-moz-box-shadow:2px 2px 2px 2px #ccc;
-webkit-box-shadow:2px 2px 2px 2px #ccc;
box-shadow:2px 2px 2px 2px #ccc;
}
Javascript kodları:
<script type="text/javascript">
$("#imgAttr").click(function(){
$(this).attr({
width:128,
height:128
});
$(this).addClass('addClassImg');
})
</script>
Açıklamalar:
- 3. Resme tıklandığında "attr()" özelliği ile resmin boyutunu büyütüyoruz.
- 7. "addClassImg" sınıfını resme ekliyoruz.
Kolay gelsin, görüşmek üzere...