JavaScript CSS Özelliği Alma ve Değiştirme

Bu örneğimizde JavaScript ile bir HTML elemanının (Div, H1, H2, p vb.) CSS biçimlendirme özelliğinin nasıl elde edilebileceği ve nasıl değiştirileceğini göreceksiniz.

Örneğimizde bir Button kontrolünün arkaplan rengini kontrol edeceğiz. Butona her basıldığında Kırmızı ise Yeşil, Yeşil ise Kırmızı Renk olmasını sağlayacağız.

Örneğe ait ekran çıktısı ve kodlar aşağıdaki gibi olacaktır.

Kaynak Kodlar:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>yazilimkodlama.com</title>
<style>
    #btnTikla{
        background-color: #FF0000;
        width: 100px;
        height: 50px;
        color: white;
        line-height: 50px;
        font-size: 20px;
    }
    </style>
</head>

<body>
    
    <button id="btnTikla">TIKLA</button>
    
    <script>
        
        var btn=document.getElementById("btnTikla");
        btnTikla.onclick=function(){
            renk=window.getComputedStyle(btn).backgroundColor;
            if(renk=="rgb(255, 0, 0)"){
                btn.style.backgroundColor="#00FF00";
            }
            else{
                btn.style.backgroundColor="#FF0000";
            }
                
        }
        
    </script>
</body>
</html>