Jump to content
×
×
  • Create New...

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

Lorem Ipsum is simply dummy text

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

Test Test

  • Bu Alana Reklam Verebilirsiniz
    Bu Alana Reklam Verebilirsiniz

Uzunlukları Kullanıcıdan Alarak Dikdörtgen Çizen jQuery Programı | Kaynak Kodları

Rate this topic


programYaz

Recommended Posts

Uzunlukları Kullanıcıdan Alarak Dikdörtgen Çizen jQuery Programı | Kaynak Kodları
  • Members

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.

<!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 ÇIKTISI:

 

jquery-dikdortgen.webp

 

YAPILIŞ VİDEOSU: 

 

Edited by programYaz

Ada LoveLace

Link to comment
https://weblep.com/topic/187-uzunluklar%C4%B1-kullan%C4%B1c%C4%B1dan-alarak-dikd%C3%B6rtgen-%C3%A7izen-jquery-program%C4%B1-kaynak-kodlar%C4%B1/
Share on other sites


Konu Altı Reklam 1
Konu Altı Reklam 2
  • Replies 0
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...