console 命令行工具 X clear

console

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

    //获取颜色
    oBtn.onclick=function(){
        console.log("line7: "+getComputedStyle(oBox)["backgroundColor)"]);//两种写法一样
        console.log("line8: "+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;
    }

    //设置CssTest()属性
    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 54: " + oBox3.style.width);
         console.log("line 55: " + getComputedStyle(oBox3).width);
    }

    //获取宽度
    var oBtn6 = document.getElementById("btn6");
     oBtn6.onclick = function () {
         console.log("line 61: " + oBox4.style.width);  //style只能拿style里面的行内样式
         console.log("line 62: " + getComputedStyle(oBox4).width);  //getComputedStyle是经过计算后最后设置出的,所有样式都能获取到
    }
}

<!DOCTYPE html>
<html>
<head>
    <mata 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" 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 = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置CssText属性</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: palegreen;
}
#box1{
    width: 100px;
    height: 100px;
    background-color: rgb(28, 112, 221);
}
#box2{
    width: 100px;
    height: 100px;
    background-color: rgb(223, 77, 121);
}
#box3{
    width: 100px;
    height: 100px;
    background-color: papayawhip;
}
.oldBox{
    width: 100px;
    height: 100px;
    background-color: peru;
}
.newBox{
    width: 75px;
    height: 50px;
    background-color:pink;
    border: 2px solid black;
}