console 命令行工具 X clear

console

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

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

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

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

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

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

    oBox2.style[attr] = val;  
  }

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

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

    oBox3.style.cssText = val;  
  }

 //Box4
  var oBtn4 = document.getElementById("btn4");
  var oBox4 = document.getElementById("box4");

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

 //Box5
  var oBtn5 = document.getElementById("btn5");
  
  oBtn5.onclick=function(){
      console.log("line 62:"+oBox3.style.width);
      console.log("line 63:"+getComputedStyle(oBox3).width);
  }
  
  //box6
    var oBtn6 = document.getElementById("btn6");

    oBtn6.onclick = function(){
      console.log("line 70:"+oBox4.style.width);
      console.log("line 71:"+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">获取颜色</buttton>
        <div id="box"></div>
    </div>
    <div>
        <button id="btn1">设置颜色</buttton>
        <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="val" 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/>
</body>
</html>

#box{
    width:100px;
    height:100px;
    background-color:hotpink;
}
#box1{
    width:100px;
    height:100px;
    background-color:blue;
}

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

#box3{
    width:100px;
    height:100px;
    background-color:brown;
}
.oldBox{
    width:100px;
    height:100px;
    background-color:bisque;
}
.newbox{
    width:50px;
    height:50px;
    background-color:black;
}