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:7" +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;
        console.log(attr);
        var val=document.getElementById("val").value;
        console.log(val);

        oBox2.style[attr]=val;
    }

    //设置cssText属性,可以同时设置多个属性
   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;
    }

    
    //设置切换样式
   var oBtn4=document.getElementById("btn4");
    var oBox4=document.getElementById("box4");

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

    //获取宽度
   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"+oBox4.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">获取颜色S</button>
        <div id="box"></div>
    </div>
        <br/>
    <div>
        <button id="btn1" style="background-color：lightskyblue">设置颜色S</button>
        <div id="box1"></div>
    </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>
   <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:rgb(71, 134, 124);
}
 
#box2{
    width:100px;
    height:100px;
    background-color:rgb(71, 75, 134);
}

#box3{
    width:100px;
    height:100px;
    background-color:rgba(151, 43, 110, 0.678);
}

.oldBox{
    width:100px;
    height:100px;
    background-color:rgba(121, 187, 46, 0.678);
}
 .newBox{
    width:100px;
    height:100px;
    background-color:rgba(233, 230, 66, 0.678);
}