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;
        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("cssTextVal").value;
        oBox3.style.cssText = val;
    }

    var oBtn4 = document.getElementById("btn4");
    var oBox4 = document.getElementById("box4");

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

<!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>
        <button id="btn2">设置样式属性</button>
        <div id="box2"></div> 
    </div>
    <div>
        <label>cssText属性：</label>
        <input id = "cssTextVal" type="text"></input>
        <br/>
        <button id="btn3">设置颜色</button>
        <div id="box3"></div>
    </div>
    <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:lightcyan;
}

#box2{
    width:100px;
    height:100px;
    background-color:aquamarine;
}

#box3{
    width:100px;
    height:100px;
    background-color:aquamarine;
}

.oldBox{
    width:100px;
    height:100px;
    background-color:black;
}

.newBox{
    width:100px;
    height:100px;
    background-color:blueviolet;
}