Bu örnekte Jquery kodları ile genişlik ve yükseklik değerlerini px cinsinden kullanıcıdan alarak bir dikdörtgen oluşturacağız. Örneğimizin amacı Jquery ile css işlemlerinin nasıl yapılacağını görmek olacaktır.
Kullanıcıdan text elemanlarına girmiş olduğu değerleri div öğesinin genişlik ve yükseklik özelliğine uygulanması, div arkaplan rengi değiştirme ve kenarlık ekleme gibi özellikleri değiştireceğiz.
Altta örneğe ait kodlar, ekran çıktısı ve yapılış videosu bulunmaktadır.
Kodlar:
Ekran Çıktısı:
Kullanıcıdan text elemanlarına girmiş olduğu değerleri div öğesinin genişlik ve yükseklik özelliğine uygulanması, div arkaplan rengi değiştirme ve kenarlık ekleme gibi özellikleri değiştireceğiz.
Altta örneğe ait kodlar, ekran çıktısı ve yapılış videosu bulunmaktadır.
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 | <!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> <!--Jquery için CDN kodunu yapıştırıyoruz.--> </head> <body> Genişlik : <input type="text" id="genislik"> Yükseklik : <input type="text" id="yukseklik"> <button id="btn">ÇİZ</button> <div id="dd"></div> <script> $("#btn").click(function(){ var gen=Number($("#genislik").val()); var yuk=Number($("#yukseklik").val()); $("#dd").css({"width":gen,"height":yuk,"border":"1px solid black","margin":"50px auto","background-color":"blue"}); }); </script> </body> </html> |