jQuery Arkaplan (Background) Rengi 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 sayfamızda bulunan öğelerin ve sayfa arkaplan (background) renginin değiştirilmesini sağlayacağız. jQuery ile CSS özelliklerine erişimin ve CSS özellikleri değişiminin nasıl yapılabileceğini örneği inceleyerek görebilirsiniz. Örneğimizde bir button vasıtasıyla sayfamızın arkaplan rengini ve sayfa içine eklemiş olduğumuz div öğelerinin arkaplan rengini değiştireceğiz. html sayfamıza ait 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
32
33
34
35

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

<style>
div{
padding: 20px;
background-color:
}
</style>
</head>
<body>

<h2>jQuery Dersleri </h2>

<div id="kutu1">www.yazilimkodlama.com</div>
<div id="kutu2">www.yazilimkodlama.com</div>
<input type="button" id="btn1" value="TIKLA">

<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#kutu1").css({"background-color":"blue"});
$("#kutu2").css({"background-color":"red"});
$("body").css({"background-color":"aqua"});
});
});
</script>
</body>
</html>
Ekran Çıktısı:



JavaScript kullanarak sayfanın arkaplan rengini değiştirmek için aşağıdaki youtube videosuna bakabilirsiniz.

Arkaplan rengini değiştirmek için 0-255 arasında rastgele sayılar üretip arkaplan renk kodu olarak ayarlanmıştır.
 
Üst Alt