"/>"/>
Yazılım Dilleri
Asp.Net 4.5 Kitabı
Skip Navigation Links

jQuery ile CSS Kullanımı 2

jQuery ile CSS Classları ekleme, silme ve kontrol etme işlemlerini inceleyelim.

 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.
 
  1. <html>
  2.             <head>
  3.                         <title>jQuery & CSS</title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <style type="text/css">
  6.                                    .sinif1{
  7.                                                background:yellow;
  8.                                                color:red;
  9.                                                font-size:30px;
  10.                                                width:400px;
  11.                                    }
  12.                                    .sinif2{
  13.                                                background:red;
  14.                                                color:yellow;
  15.                                                font-size:15px;
  16.                                                width:200px;
  17.                                    }
  18.                         </style>
  19.                         <script type="text/javascript">
  20.                                    $(document).ready(function(){
  21.                                                $("#btCssDegistir").click(function(){
  22.                                                            if($("#metin").hasClass("sinif1")){
  23.                                                                        $("#metin").removeClass("sinif1");
  24.                                                                        $("#metin").addClass("sinif2");
  25.                                                            }
  26.                                                            else{
  27.                                                                        $("#metin").removeClass("sinif2");
  28.                                                                        $("#metin").addClass("sinif1");
  29.                                                            }
  30.                                                });
  31.                                    });
  32.                         </script>
  33.             </head>
  34.             <body>
  35.                         <button id="btCssDegistir">CSS Değiştir</button>
  36.                         <div id="metin" class="sinif1">Veysel Uğur KIZMAZ</div>
  37.             </body>
  38. </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
Bilgisayar Mühendisi
 

 

Yorumlar (0)

Yorum Yap

Mail listesine katılmak için tıklayınız

Hakkımdaki son bilgilere anlık erişmek için mail listesine katılabilirsiniz.