JavaScript ile Arka Plan Rengi Değişimi Nasıl Yapılır?
JavaScript ile web sayfanızın arka plan rengini kolayca değiştirebilirsiniz. Bu yazıda temel ve anlaşılır bir örnekle nasıl yapıldığını gösteriyoruz.
JavaScript ile Arka Plan Rengi Değişimi Nasıl Yapılır?
22 Şubat 2026
JavaScript ile Arka Plan Rengi Değiştirme
Web tasarımında sayfanın arka plan rengini değiştirmek oldukça sık kullanılan bir işlemdir. JavaScript sayesinde kullanıcı etkileşimlerine bağlı olarak veya belirli koşullarda arka plan rengini dinamik olarak değiştirebilirsiniz. Bu makalede basit bir örnekle "nasıl yapılır" adım adım göstereceğiz.
Temel Mantık
JavaScript ile sayfanın arka plan rengini değiştirmek için document.body.style.backgroundColor özelliğini kullanırız. Bu özellik CSS'deki background-color stilini değiştirerek anlık renk değişimi sağlar.
Örnek: Butona Tıklayınca Renk Değiştirme
Aşağıdaki örnekte bir buton kullanarak sayfanın arka plan rengini değiştireceğiz. Her tıklandığında rastgele bir renk atanacak.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arka Plan Rengi Değiştirme</title>
</head>
<body>
<button id="changeColorBtn">Rengi Değiştir</button>
<script>
// Rastgele renk üretme fonksiyonu
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
// Buton seçimi
const button = document.getElementById('changeColorBtn');
// Tıklama olayına fonksiyon bağlama
button.addEventListener('click', () => {
const randomColor = getRandomColor();
document.body.style.backgroundColor = randomColor;
});
</script>
</body>
</html>
Kodun Açıklaması
getRandomColorfonksiyonu, 6 basamaklı rastgele bir hexadecimal renk kodu döner.- Sayfada
changeColorBtnid'sine sahip bir buton yer alır. - Butona her tıklandığında,
getRandomColorçağrılır ve sayfa arka plan rengini değiştirir.
Sonuç
Bu basit örnek sayesinde JavaScript ile sayfa arka plan rengini nasıl dinamik olarak değiştirebileceğinizi gördünüz. İsterseniz renk listesini sabitler, kullanıcı tercihlerine göre de değiştirebilirsiniz. Dinamik renk değişikliğini animasyonlarla da destekleyerek web sayfanızı daha interaktif hale getirebilirsiniz.