Bu yazımızda <option> öğesini kullanarak sayfamıza eklemiş olduğumuz paragrafın css özelliğini (yazı rengi) değiştireceğiz. Açılır kutumuza eklediğimiz renklerden seçili olan renge göre paragraf içindeki yazı renginin değişmesini sağlayacağız. Sayfaya ait kodlar ve ekran çıktısı aşağıdaki gibi olacaktır.
|
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 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>yazilimkodlama.com</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <p id="p1" style="font-size: 20px">Bu yazımızda öğesini kullanarak sayfamıza eklemiş olduğumuz paragrafın css özelliğini (yazı rengi) değiştireceğiz. Açılır kutumuza eklediğimiz renklerden seçili olan renge göre paragraf içindeki yazı renginin değişmesini sağlayacağız. Sayfaya ait kodlar ve ekran çıktısı aşağıdaki gibi olacaktır.</p> <select id="secim"> <option value="red">Kırmızı</option> <option value="green">Yeşil</option> <option value="blue">Mavi</option> <option value="pink">Pembe</option> <option value="purple">Mor</option> </select> <script> $("#secim").change(function(){ var deger=$("#secim").val(); $("#p1").css({"color":deger}); }); </script> </body> </html> |
Ekran Çıktısı:
