Jquery css() Kullanımı – Jquery Fonksiyonlar
Merhaba, bu yazımda jquery ile css kullanımı hakkında bilgiler ve güzel örnekler paylaşacak, anlatmaya çalışacağım. Kendimce bir jquery serisi yazıyorum ve ilk sıralara aldığım fonksiyonlardan birisi css() kullanımı yazısı yani bu yazı oldu. Çünkü jquery ile oldukça fazla kullanılan, çok ve oldukça kolay kullanıma sahip bir fonksiyon. Bir önceki yazımda Jquery click() Kullanımı hakkında bilgiler vererek birkaç örnek ile açıklamaya çalışmıştım. Eğer jquery de on() kullanımı ya da jquery de click() kullanımı hakkında bilgi sahibi değilseniz bu yazıdan önce o yazılara göz atmanızı tavsiye ederim.
Jquery css() fonksiyonu, kendisinine girilen css değerlerini belirtilen HTML elemanlarına uygular. Oldukça hızlı çalışır ve kullanımı da oldukça kolaydır.
Örnek;
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<!DOCTYPE html> <head> <title>scetinkaya.com - Jquery css() Kullanımı</title> </head> <body> <p> p tagına işlem yap! </p> <div> div tagına işlem yap! </div><br> <button id="buton"> Butona İşlem Yap ! </button> <br> <p class="degistir"> tikla class değerine sahip p tagına işlem yap !</p> <button class="stildegistir"> Stil Değiştir </button> </body> <script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function(){ // stildegistir class değerine sahip butona tıklandığında $(".stildegistir").on("click", function(){ // p tagına sahip elemanların arka planını kırmızı yap $("p").css({ "background-color" : "red" }); // div tagına sahip elemanlara border ekle $("div").css({ "border" : "1px solid #333" }); // buton id değerine sahip elemana // 5 px border ekle // yazısıcı beyaz yap // arka plan rengini gri yap $("#buton").css({ "border" : "5px solid #333", "color" : "white", "background-color" : "gray" }); // .degistir class değerine sahip elemanları // yazı rengini siyah yap // yazı boyutunu 22px yap // 5px padding uygula // 100px margin-top değeri uygula $(".degistir").css({ "color" : "black", "font-size" : "22px", "padding" : "5px", "margin-top" : "100px" }); }); }); </script> </html> |
Yukarıdaki kodları kopyalayın ve metin belgesine yapıştırarak adını index.html olarak değiştirip kaydedin. Dosyayı internet tarayıcınız ile açarak test edin. Stil değiştir butonuna tıkladığınızda sayfada bulunan yazı, buton ve diğer elemanların nasıl anında değiştiğini göreceksiniz. Kısaca jquery ile css() kullanımı sayesinde elemanlara CSS değerleri ekliyor stillerini değiştiriyoruz. Siz de bol bol örnek yaparak kendinizi geliştirebilirsiniz.
Jquery css() kullanımı bu şekilde. Bir sonraki yazıda görüşmek üzere.