SOURCE

window.onload=function(){
    var oBtn=document.getElementById("btn");
    var oBox=document.getElementById("box");

    oBtn.onclick=function(){
        console.log("line 7:"+getComputedStyle(oBox).backgroundColor);
        console.log("line 8:"+getComputedStyle(oBox)["backgrondColor"]);
    }

    //设置颜色
    var oBtn1=document.getElementById("btn1");
    var oBox1=document.getElementById("box1");

    oBtn1.onclick=function(){
        oBox1.style.backgroundColor="lightskyblue";
        oBox1.style.border="2px solid black";
    }

    //设置指定属性
    var oBtn2=document.getElementById("btn2");
    var oBox2=document.getElementById("box2");

    oBtn2.onclick=function(){
       var attr=document.getElementById("attr").value;
       var val=document.getElementById("val").value;

       oBox2.style[attr]=val;
    }

    //设置cssText属性
    var oBtn3=document.getElementById("btn3");
    var oBox3=document.getElementById("box3");

    oBtn3.onclick=function(){
       var val=document.getElementById("cssTextValue").value;

       oBox3.style.cssText=val;
    }

    //切换样式
    var oBtn4=document.getElementById("btn4");
    var oBox4=document.getElementById("box4");

    oBtn4.onclick=function(){
      oBox4.setAttribute("class","newBox");
    }

    //获取样式属性
    var oBtn5=document.getElementById("btn5");
    var oBtn6=document.getElementById("btn6");

    oBtn5.onclick = function()
        {
            console.log("line56:" + oBox3.style.border);
            console.log("line57:" + getComputedStyle(oBox3).border);
        }


    oBtn6.onclick = function()
        {
            console.log("line63:" +oBox4.style.border);
            console.log("line64:" + getComputedStyle(oBox4).border);
        }
} 

 <div>
        <button id="btn">获取颜色</button>
        <div id="box"></div>
    </div>
    <br/> 
<div>
        <button id="btn1" style="background-color:lightskyblue">获取颜色</button>
        <div id="box1"></div>
    </div>
    <br/> 
 <div>
        <label>属性：</label>
        <input id = "attr" type="text"></input>
        <br/>
        <label>取值：</label>
        <input id = "val" type="text"></input>
        <br/>
        <button id="btn2">设置样式属性</button>
        <div id="box2"></div>
    </div>
    <br/> 
    <div>
        <label>cssText属性：</label>
        <input id = "cssTextValue" type="text"></input>
        <br/>
        <button id="btn3">设置cssText属性</button>
        <div id="box3"></div>
        <button id="btn5">获取宽度</button>
    </div>
    <br/> 

    <div>
        <button id="btn4">切换样式</button>
        <div id="box4" class="oldBox"></div>
        <button id="btn6">获取宽度</button>
    </div>
    <br/> 
    

#box{
    width:100px;
    height:100px;
    background-color:hotpink;
} 
#box1{
    width:100px;
    height:100px;
    background-color:aquamarine;
} 
#box2{
    width:100px;
    height:100px;
    background-color:blueviolet;
} 
#box3{
    width:100px;
    height:100px;
    background-color:darkkhaki;
} 
.oldBox{
    width:100px;
    height:100px;
    background-color:darkseagreen;
} 
.newBox{
    width:100px;
    height:100px;
    background-color:darkorange;
}