console 命令行工具 X clear

console

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)["backgroundcolor"]);
    }

    //设置颜色
    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 txt = document.getElementById("txt").value;
    oBox3.style.cssText = txt;
    }

//切换样式
 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("line 52:"+oBox3.style.width);
    console.log("line 56:"+getComputedStyle(oBox3).width);
    }

 oBtn6.onclick=function(){
    console.log("line 57:"+oBox4.style.width);
    console.log("line 58:"+getComputedStyle(oBox4).width);
    }
}

<!DOCTYPE html> 
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">   
    </style>
    <script>
       
    </script>
</head>
<body>
 <div>
      <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="txt" type="text"/></input>
        <br/>
        <button id="btn3" type="button" value="设置">设置cssText属性</button>
        <div id="box3"></div>
    </div>
    <br/>
    <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:aquamarine;
} 
#box2{
    width:100px;
    height:100px;
    background-color:blueviolet;
} 
#box3{
    width:100px;
    height:100px;
    background-color:darkorange;
}
.oldBox{
    width:100px;
    height:100px;
    background-color:forestgreen;
}

.newBox{
    width:50px;
    height:50px;
    background-color:chartreuse;
    border:2px solid black;
}