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>



Mutlu Kodlamalar,
Oğuzhan TAŞ
Bookmark and Share
Dil Değiştir(Change Language)