Zemin renkleri sayfa tasarımında önemlidir. Belirli bir alanın veya tüm sayfanın zemin renklerini değiştirmek gerekebilir. Background rengini değiştirmek CSS üzerinden yapılabilir. Mesela bir div etiketinin zemin rengini kırmızı yapmak istersek aşağıdaki gibi yapabiliriz.
<div style="background-color: red">Div içeriği</div>Yine aynı işlemi bir CSS sınıfı üzerinde de tanımlayabilirz.
<style>
.aciklama {
background-color: red;
}
</style>Fakat bizim bu yazıda göreceğimiz konu bir butona tıklandığında zemin rengini değiştirmek. Bu durumda Javascript kullanıyoruz. Javascript bize bir elementin sitilini değiştirmek için farklı yöntemler sunuyor.
Javascript Bir Elementin Background Rengini Değiştirme
İlk olarak bir elemente sitil atamak istediğimizde Javascriptin bize sunmuş olduğu style nesnesini kullanarak işlem yapalım. style özelliği bir HTML etiketinin sitil bilgilerinin tutulduğu Javascrip DOM nesnesindir. Mesela id değeri icerik olan bir div içerisindeki yazının rengini yeşil yapmak istersek aşağıdaki gibi yapabiliriz.
const divDOM = document.getElementByID("icerik");
divDOM.style.color = "green";Evet bir elementin sitilini değiştirmek oldukça kolay. Şimdi aynı elementin zemin rengini değiştirmek istersek şu şekilde yapabiliriz.
const divDOM = document.getElementByID("icerik");
divDOM.style.backgroundColor = "black";Javascript classList İle Elementin Zemin Rengini Değiştirme
Şimdi de farklı bir yöntem olan ve elementlerin css sınıflarını tutan classList nesnesi ile işlem yapalım. Sayfamızda siyah-zemin isimli bir css sınıfı olduğunu varsayalım.
<style>
.siyah-zemin {
background-color: black;
}
</style>Bu sınıfı icerik id değerine sahip olan div elementine atayalım.
const divDOM = document.getElementByID("icerik");
divDOM.classList.add("siyah-zemin");Evet artık div etiketinin zemin rengini siyah yapmış olduk.
Butona Tıklandığında Zemin Rengini Değiştirme
Şimdi bir butona tıklandığında Javascript ile bir elementin zemin rengini değitirelim. Bunun için bir fonksiyon yazacağız ve element.style nesnesini kullanacağız.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
.yesil {
color: green;
}
#icerik {
padding: 15px;
}
</style>
<script>
const zeminRenginiDegistir = () => {
const icerikDOM = document.getElementById("icerik");
icerikDOM.style.backgroundColor ="black";
};
</script>
<title>Document</title>
</head>
<body>
<h1>Başlık</h1>
<div id="icerik" class="yesil">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque, omnis expedita! Error vero maxime qui velit, dolorem totam quas!</div>
<button onClick="zeminRenginiDegistir()">Zemin Rengini Değiştir</button>
</body>
</html>Yukarıdaki örneğimizi bir websayfası olarak kayıt edip çalıştırdığımızda, Zemin Rengini Değiştir butonuna tıklayarak yazının zemin rengini değiştirebiliriz.
Sonuç
Javascript ile bir elementin css özelliklerini değiştirmek için farkı yollar vardır. element.style özelliği ile elemente atancak tüm sitil bilgilerini belirtebiliriz.
Javascript ile ilgili sormak istediklerinizi yorumlardan bize sora bilirsiniz.