SOURCE

console 命令行工具 X clear

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

    oBtn.onclick = function(){
        console.log("line7:"+getComputedStyle(oBox).backgroundColor);
        console.log("line8:"+getComputedStyle(oBox)["backgroundColor"]);
    }

    var oBtn1 = document.getElementById("btn1");
    var oBox1 = document.getElementById("box1");

    oBtn1.onclick = function(){
        oBox1.style.backgroundColor = "aquamarine ";
    }

    var oBtn2 = document.getElementById("btn2");
    var oBox2 = document.getElementById("box2");

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

        oBox1.style[attr] = val;
    }

    var oBtn3 = document.getElementById("btn3");
    var oBox3 = document.getElementById("box3");

    oBtn3.onclick = function(){
        var val = document.getElementById("csssTextVal").value;
        console.log(val)

        oBox3.style.cssText = val;
    }

    //********常用*********
    var oBtn4 = document.getElementById("btn4");
    var oBox4 = document.getElementById("box4");

    oBtn4.onclick = function(){
        //oBox.calssName = "newBox"

        oBox4.setAttribute("class","nexBox");
    }

    var oBtn5 = document.getElementById("btn5");
    oBtn5.onclick = function(){
        console.log("line 50"+oBox3.style.width);
        console.log("line 51"+getComputedStyle(oBox3).width);
    }

    var oBtn6 = document.getElementById("btn6");
    oBtn6.onclick = function(){
        console.log("line 56"+oBox3.style.width);
        console.log("line 57"+getComputedStyle(oBox4).width);
    }
} 
<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">   
    </style>
    <script>
       
    </script>
</head>
<body>
    <div>
        <button id="btn">获取颜色</button>
        <div id="box"></div>
    </div>
    </br>
    <div>
        <button id="btn1" style="background-color:lightsktblue">设置颜色</button>
        <div id="box1"></div>
     </div>
     </br>
    <div>
        <button id="btn2" style="background-color:lightsktblue">设置样式属性</button>
        <label>属性:</label>
        <input id = "attr" type="text"></input>
        </br>
        <label>取值:</label>
        <input id = "val" type="text"></input>
        <div id="box2"></div> 
     </div>
     </br>
      <div>
        <label>cssText属性:</label>
        <input id = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置cssText</button>
        <div id="box3"></div>
        <button id="btn5">获取宽度</button>
    </div>
    <br/>
    <br/>
    <div>
        <button id="btn4">切换样式</button>
        <div id="box4" class="oldBox"></div>
        <button id="btn6">获取宽度</button>
    </div> 
    <br/> 
</body>
</html> 
#box{
    width:100px;
    height:100px;
    background-color:hotpink;
}

#box1{
    width:100px;
    height:100px;
    background-color:aquamarine;
}

#box2{
    width:100px;
    height:100px;
    background-color:azure;
}

#box3{
    width:100px;
    height:100px;
    background-color:brown;
}

.oldbox{
    width:100px;
    height:100px;
    background-color:saddlebrown;
}

.newbox{
    width:100px;
    height:100px;
    background-color:chocolate;
}