Bu örnek, JQuery ile bir nesnenin CSS özelliğinin nasıl elde edilebileceği ve nasıl değiştirilebileciği konusunda bilgi verecektir.
JQuery ile bir elemanın CSS özelliği ve değerini aşağıdaki gibi elde edebilirsiniz:
1 2 3 | $(selector).css("propertyName"); |
Yukarıda HTML sayfasında bulunan bir elementin CSS özelliğinin nasıl elde edilebileceğini gördük. Şimdi de bir CSS özelliğinin nasıl değiştirilebileceğine bakalım.
1 2 3 | $(selector).css({"propertyName":"value", "propertyName":"value", ...}); |
Şimdi de bunu bir örnek üzerinde inceleyelim.
Örneğimizde bir button bulunmakta. Button varsayılan arkaplan rengi “Kırmızı” olarak ayarlanmıştır.
Bu aşamadan sonra button kontrolünün her tıklamada renginin “Kırmızı” veya “Yeşil” olarak değişmesini sağlayacağız.
Kaynak Kodlar:
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <style> #btn{ background-color: #FF0000; width: 100px; height: 50px; color: white; line-height: 50px; font-size: 20px; } </style> </head> <body> <button id="btn">TIKLA</button> <script> $("#btn").click(function(){ var renk=$("#btn").css("background-color"); if(renk=="rgb(255, 0, 0)"){ $(this).css({backgroundColor:"#00FF00"}); } else{ $(this).css({backgroundColor:"#FF0000"}); } }) </script> </body> </html> |
Yorum Yap