jQuery Tıklanan Kutunun Rengini Değiştirme

sdkbyrm

olwα.ɴeт
Üyelik Tarihi
23 Aralık 2020
Mesajlar
813
Beğeniler
1
Puanı
3
Ticaret: 0 / 0 / 0
Bu örneğimizde jQuery ile CSS özelliği değiştirmeyle ilgili bir örnek oluşturacağız. Sayfamıza eklediğimiz color nesnesini kullanarak seçtiğimiz rengin, sayfamıza div etiketi ile eklemiş olduğumuz kutuların üzerine tıklandığında renk değiştirmesini sağlayacağız.






Yukarıdaki sayfayı oluşturmak için gerekli kodları html dosyası oluşturarak Kopyala – Yapıştır yöntemiyle deneyebilirsiniz.


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Jquery Örnekler</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<style>
.kutu {
width: 200px;
height: 200px;
float: left;
border: #000 solid 2px;
margin: 3px;
}
</style>


</head>

<body>
<input type="color" id="renk">
<br>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>
<div class="kutu"></div>

<script>
$(document).ready(function() {
$(".kutu").click(function() {
var secilenrenk = $("#renk").val();
$(this).css("backgroundColor", secilenrenk);
});
});
</script>
</body>
</html>
 
Üst Alt