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

Option Kullanarak Renk Değiştirme Örneği Kodları | jQuery

Rate this topic


programYaz
 Share


Recommended Posts

Option Kullanarak Renk Değiştirme Örneği Kodları | jQuery
 Share


  • Members

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.

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

jquery-option-renk-1.webp

Ada LoveLace

Link to comment
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.

 Share


×
×
  • Create New...