JavaScript ile CSS kodlarını Yönlendirme

Bu örneğimizde JavaScript ile CSS kodlarımızı değiştirebileceğiz. CSS kodlarımıza daha fazla dinamiklik katacağız. Aşağıdaki gibi kutu isminde bir class tanımlayıp, bu kutunun rengini butonlarla dğeiştireceğiz.

.kutu{
    width:250px; height:250px;
    background-color:red;
}

Daha sonra aşağıdaki gibi bir kod satırı ile ilgili kutu nesnemizin rengini değiştiriyoruz.
<button type="button" onclick="renkDegistir('red')">Kırmızı</button>

Kodun tamamı aşağıdadır. Notepad++ veya Notepad gibi bir editörde yazıp, html uzantılı olarak kaydediniz.

<html>
<head>
<meta charset="utf-8">

<style>
.kutu{
    width:250px; height:250px;
    background-color:red;
}
</style>

<script>

function renkDegistir(renk)
{
   document.getElementById("kutu").style.background=renk;
}

</script>
 
</head>
<body>
<div class="kutu" id="kutu" onclick="renkDegistir('black')">
</div><br/>
<button type="button" onclick="renkDegistir('red')">Kırmızı</button>
<button type="button" onclick="renkDegistir('blue')">Mavi</button>
<button type="button" onclick="renkDegistir('green')">Yeşil</button>
</body>
</html>


JavaScript ile CSS kodlarını Yönlendirme
JavaScript ile Zemin Rengini Değiştirme
JavaScript ile Metin Kutusu değerini artırmak ve azaltmak
JavaScript ile Form Kontrolü
JavaScript ile Döngüler
JavaScript ile Fonksiyon İşlemleri
JavaScript ile Harf ve Rakam Kontrolü
JavaScript ile Basit Hesaplatma İşlemleri
JavaScript ile Ortalama ve Harf Notu Hesaplama
JavaScript ile Twitter benzeri karakter kontrolü
JavaScript ile Yuvarlatma Hatası nasıl düzeltilir?
JavaScript Luhn Algoritması ile Kredi Kartı Doğrulama

Mutlu Kodlamalar,
Oğuzhan TAŞ
Bookmark and Share
Dil Değiştir(Change Language)
Kategoriler
Kütüphane Programı
En çok Okunan 18 Makale