jQuery ile CSS Kullanımı

16.06.2012Okunma Sayısı: 12983Kategori: JQuery

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

Bu uygulamayı bir örnek üzerinde inceleyelim.

 
<html>
            <head>
                        <title>jQuery & CSS</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                               $(document).ready(function(){
                                                           $("#metin").css({
                                                                       background:"red",
                                                                       color:"yellow",
                                                                       textAlign:"right",
                                                                       width:"400px",
                                                                       fontSize:"30px"
                                                           });
                                               });
                        </script>
            </head>
            <body>
                        <div id="metin">Veysel Uğur KIZMAZ</div>
            </body>
</html>

<html>
            <head>
                        <title>jQuery & CSS</title>
                        <script src="jquery-1.5.1.js"></script>
                        <script type="text/javascript">
                                               $(document).ready(function(){
                                                           $("#metin").css({
                                                                       background:"red",
                                                                       color:"yellow",
                                                                       textAlign:"right",
                                                                       width:"400px",
                                                                       fontSize:"30px"
                                                           });
                                               });
                        </script>
            </head>
            <body>
                        <div id="metin">Veysel Uğur KIZMAZ</div>
            </body>
</html>

HTML sayfamız içinde “metin” isminde bir <div> oluşturuyoruz. CSS’imizi bu nesne üzerinde deneyeceğiz.
$(“#metin”).css(properties); fonksiyonu ile “metin” isimli HTML nesnemizin CSS’ini belirliyoruz.
background: “metin” nesnesinin arkaplan rengini belirler.
color: “metin” nesnesinin yazı rengini belirler.
textAlign: “metin” nesnesinin yatay hizalanmasını belirler.
width: “metin” nesnesinin genişliğini belirler.
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

veysel@ugurkizmaz.com