jQuery option Kullanarak Renk Değiştirme Örneği

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





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

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

 
Üst Alt