console 命令行工具 X clear

console

window.onload = function() {
    //获取颜色
    var oBtn = document.getElementById("btn"); 
    var oBtx = document.getElementById("box");
    oBtn.onclick = function (){
        //两种写法一样
        console.log("line 7:"+getComputedStyle(oBtx).backgroundColor); 
        console.log("line 8:"+getComputedStyle(oBtx)["backgroundColor"]);
    }
    //设置颜色
    var oBtn1 = document.getElementById("btn1"); 
    var oBtx1 = document.getElementById("box1");
    oBtn1.onclick = function (){
        //两种写法一样
        oBtx1.style.backgroundColor="lightskyblue";
        oBtx1.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 val=document.getElementById("cssTextValue").value;

        oBox3.style.cssText=val;//直接在输入框输入样式
     }

    //切换样式
     var oBtn4 = document.getElementById("btn4"); 
     var oBox4 = document.getElementById("box4");
     oBtn4.onclick = function (){
        oBox4.setAttribute=("class","newBox");
    }

    //获取样式属性（拿外部属性只能通过getComputedStyle样式拿属性）
    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>
        <button id="btn">获取颜色</button>
        <div id="box"></div>
    </div>
    <br/> 
  <div>
        <button id="btn1">设置颜色</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>属性：</label>
        <input id = "cssTextValue" type="text"></input>
        <br/>
        <button id="btn3">设置样式属性</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:rgb(215, 255, 105);
} 
#box1{
    width:100px;
    height:100px;
    background-color:hotpink;
} 
#box2{
    width:100px;
    height:100px;
    background-color:crimson;
} 
#box3{
    width:100px;
    height:100px;
    background-color:rgba(141, 134, 233, 0.651);
} 
.oldBox{
    width:100px;
    height:100px;
    background-color:rgb(4, 2, 32);
} 
.newBox{
    width:50px;
    height:50px;
    background-color:rgb(129, 24, 32);
    border: 2px solid cyan;
}