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

Konuyu Okuyanlar (0 kayıtlı üye )

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
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:


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>
Ekran Çıktısı:

jquery-dikdortgen.jpg
 
Üst Alt