Veysel Uğur KIZMAZ

jQuery ile CSS Kullanımı 2

16.06.2012Okunma Sayısı: 6133Kategori: JQuery

 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
veysel@ugurkizmaz.com