ASP.NET
Network Akademi

Met Hostimg

“Bilgi paylaşıldıkça artar” sloganı ile .NET Platformuna ilişkin birikimlerin paylaşıldığı ASP.NET.TR Topluluğunda sizde “YAZAR” olmak için ; info@asp.net.tr e-mail adresine kendinizi anlatan bir e-mail göndererek başvuruda bulunabilirsiniz.

JQuery CSS Ekleme Silme

Veysel Uğur KIZMAZ
Javascript
19.10.2011 00:58:22
Hit : 538

 

jQuery ile CSS kullanımında hazır CSS Classlarını ekleme, silme ve HTML elemanında varlığını kontrol etme işlemlerini inceleyelim.
 
Yapacağımız örnek uygulamada 2 adet CSS classımız bulunmaktadır (sinif1, sinif2). Div’imize başlangıçta sinif1 classı atanmıştır. Butona her tıklandığında diğer class’a geçiş yapmaktadır.
 
<html>
            <head>
                        <title>jQuery & CSS</title>
                        <script src="jquery-1.5.1.js"></script>
                        <style type="text/css">
                                   .sinif1{
                                               background:yellow;
                                               color:red;
                                               font-size:30px;
                                               width:400px;
                                   }
                                   .sinif2{
                                               background:red;
                                               color:yellow;
                                               font-size:15px;
                                               width:200px;
                                   }
                        </style>
                        <script type="text/javascript">
                                   $(document).ready(function(){
                                               $("#btCssDegistir").click(function(){
                                                           if($("#metin").hasClass("sinif1")){
                                                                       $("#metin").removeClass("sinif1");
                                                                       $("#metin").addClass("sinif2");
                                                           }
                                                           else{
                                                                       $("#metin").removeClass("sinif2");
                                                                       $("#metin").addClass("sinif1");
                                                           }
                                               });
                                   });
                        </script>
            </head>
            <body>
                        <button id="btCssDegistir">CSS Değiştir</button>
                        <div id="metin" class="sinif1">Veysel Uğur KIZMAZ</div>
            </body>
</html>
 
  1. $(“#metin”).hasClass(“sinif1”) fonksiyonu bool türünde veri döndürmektedir. “sinif1” isimli CSS classının “metin” isimli HTML elemanında var olup olmadığını kontrol etmektedir. Varsa true, yoksa false return edecektir.
  2. $(“#metin”).addClass(“sinif1”) fonksiyonu, “metin” isimli HTML elemanına “sinif1” CSS classını eklemektedir.
  3. $(“#metin”).removeClass(“sinif1”) fonksiyonu, “metin” isimli HTML elemanından “sinif1” CSS classını çıkarmaktadır.
 
 
 
Veysel Uğur KIZMAZ
 

 


Tag » » » »


BU İÇERİĞE YORUMDA BULUNUN


Bu MAKALE'ye yorum yapabilmek için Üye olmalısınız ...!


BU İÇERİĞE YAPILAN YORUMLAR