jQuery ile css( ) metodu kullanılarak seçilen öğelerde css sitil özelliği ayarlanabilir ya da css özellikleri okunabilir. Bir öğenin css özelliklerini döndürmek için aşağıdaki gibi bir satır kullanılır.
css(“propertyname“);
Örnek olarak sayfamızda bulunan bir paragrafa ait arkaplan rengini döndürelim.
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 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style> #p1{ background-color:crimson; color: #FFF; } </style> </head> <body> <h2>Başlık </h2> <p id="p1">www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com www.yazilimkodlama.com</p> <button>Paragraf Renk Değerini Bul</button> <script> $(document).ready(function(){ $("button").click(function(){ alert("Background color = " + $("#p1").css("background-color")); }); }); </script> </body> </html> |
Sayfamızı çalıştırıp butona tıkladığımızda;
Şimdi de bunun tam tersi bir işlem gerçekleştirelim. Bu defa butona tıkladığımızda sayfamızda bulunan bir div öğesine ait bazı CSS özelliklerini değiştirelim.
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 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>www.yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <div id="kutu"> www.yazilimkodlama.com </div> <button id="btn">TIKLA</button> <script> $(document).ready(function(){ $("#btn").on("click",function(){ $("#kutu").css({"background-color": "red", "font-size": "200%","color":"white"}); }); }); </script> </body> </html> |
