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

jQuery ile CSS Kullanımı

jQuery ile CSS düzenleme işlemlerini inceleyelim.

 jQuery ile HTML elemanlarına CSS ekleme işlemine bakalım.

 
Bu uygulamayı bir örnek üzerinde inceleyelim.
 
 
  1. <html>
  2.             <head>
  3.                         <title>jQuery & CSS</title>
  4.                         <script src="jquery-1.5.1.js"></script>
  5.                         <script type="text/javascript">
  6.                                                $(document).ready(function(){
  7.                                                            $("#metin").css({
  8.                                                                        background:"red",
  9.                                                                        color:"yellow",
  10.                                                                        textAlign:"right",
  11.                                                                        width:"400px",
  12.                                                                        fontSize:"30px"
  13.                                                            });
  14.                                                });
  15.                         </script>
  16.             </head>
  17.             <body>
  18.                         <div id="metin">Veysel Uğur KIZMAZ</div>
  19.             </body>
  20. </html>
 
  1. HTML sayfamız içinde “metin” isminde bir <div> oluşturuyoruz. CSS’imizi bu nesne üzerinde deneyeceğiz.
  2. $(“#metin”).css(properties); fonksiyonu ile “metin” isimli HTML nesnemizin CSS’ini belirliyoruz.
  3. background: “metin” nesnesinin arkaplan rengini belirler.
  4. color: “metin” nesnesinin yazı rengini belirler.
  5. textAlign: “metin” nesnesinin yatay hizalanmasını belirler.
  6. width: “metin” nesnesinin genişliğini belirler.
  7. fontSize: “metin” nesnesinin font’unu belirler.
 
Kısaca CSS classlarında yer alan özellikleri “-“ simgesi kullanılmadan yazılmakta, : sonrasında ise değeri yazılmaktadır.
 
Bu işlem sonucunda ekran görüntüsü aşağıdaki gibidir.
 
 
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.