SOURCE

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";
}

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.sty1e[attr]= val;
}
var oBtn3 =document . getElementById( "btn3");
var oBox3 = document . getElementById( "box3");
oBtn3.onclick = function () {
var val = document. getElementById("css TextVal") .value;
console. log(val);
oBox3.style.cssText= val;}

var oBtn4 = document . getElementById( "btn4");
var oBox4 = document . getElementById( "box4");
oBtn4.onclick = function () {
oBox4. setAttribute("class", "newBox");
oBox3.sty1e.cssText= val;}
} 
<!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" 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 = "cssTextValue" 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:hotpink;
}
 #box1{
    width:100px;
    height:100px;
    background-color:blue;
}
 #box2{
    width:100px;
    height:100px;
    background-color:greenyellow;
}