JQuery Uzunlukları Kullanıcıdan Alarak Dikdörtgen Çizme

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:


<!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>

<!doctype html>

<html>

<head>

<title>yazilimkodlama.com</title>

</head>

<body>

Genişlik :

Yükseklik :

$("#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>

Ekran Çıktısı:

Video:

Örnek 2:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <style>
        #kutu{
            border:solid 5px black;
            background:yellow;
            transition: .5s all;
        }
    </style>
</head>
<body>
    
    <input type="text" id="s1" name="soz" placeholder="genişlik">

    <input type="text" id="s2" name="soz" placeholder="yükseklik" >

    <div id="kutu"></div>
    
<script>

    //Soru ekranda bulunan iki input içideki sayıları toplayıp div içinde gösterin


   $("#s1,#s2").on('input',function(){
        $("#kutu").css({
            "width": $("#s1").val() + "px",
            "height":$("#s2").val() + "px"
        })
   })



</script>

</body>
</html>