console 命令行工具 X clear

console

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

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

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

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

  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;
  }

    var oBtn3=document.getElementById("btn3");
    var oBox3=document.getElementById("box3");
  oBtn3.onclick=function(){
      var val= document.getElementById("cssTextVal").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");
oBtn5.onclick=function(){
    console.log("line:43"+oBox4.style.width);
    console.log("line:44"+getComputedStyle(oBox4).width);

}

var oBtn6 =document.getElementById("btn5");
oBtn6.onclick=function(){
    console.log("line:50"+oBox4.style.width);
    console.log("line:51"+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>
    <div>
        <button id="btn1">设置颜色</button>
         <div id="box1"></div>
    </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>
        <label>cssText属性：</label>
        <input id = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置css</button>
         <div id="box3"></div>
    </div>
 <div>
        <button id="btn4">切换样式</button>
         <div id="box4" class="oldBox"></div>
         <button id="btn5">获取宽度</button>
    </div>
    <div>

</body>
</html>

#box{
    width:100px;
    height:100px;
    background-color:hotpink;}
    #box1{
    width:100px;
    height:100px;
    }
    #box2{
    width:100px;
    height:100px;
    background-color:aqua;
    }
       #box3{
    width:100px;
    height:100px;
    background-color:brown;
    }
.oldBox{
    width:100px;
    height:100px;
    background-color:indianred;
}

.newBox{
    width:50px;
    height:50px;
    background-color:coral;
}