console 命令行工具 X clear

console

window.onload = function () 
{
var oBtn=document.getElementById("btn")
var oBox=document.getElementById("box")
oBtn.onclick=function(){
console.log(getComputedStyle(oBox).backgroundColor)
console.log(getComputedStyle(oBox)["backgroundColor"])
}

var oBtn1=document.getElementById("btn1")
var oBox1=document.getElementById("box1")
oBtn1.onclick=function(){
oBox1.style.backgroundColor="lightskybule"
} 


var oBtn2=document.getElementById("btn2")
var oBox2=document.getElementById("box2")
oBtn2.onclick=function(){
oBox2.style.backgroundColor="lightskybule"
var attr =document.getElementById("attr").getAttribute("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("").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(){

// }
}

<!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>
         <button id="btn2">设置样式颜色</button>
         </br>
        <div id="box2"></div>  
            </br>

      <div>
        <label>cssText属性：</label>
        <input id = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置cssText</button>
        <div id="box3"></div>
    </div>
    <br/>
    <br/>
    <div>
        <button id="btn4">切换样式</button>
        <div id="box4" class="oldBox"></div>
    </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:coral;
}

.oldBox{
    width:100px;
    height:100px;
    background-color:indianred;
}
.newbox{
    width:100px;
    height:100px;
    background-color:seagreen;
}