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";
     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;
}
//设置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");

}
}

<IDOCTYPE 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 1d ="val" type="text"></input)
  <br/>
<button 1d="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 1dw"box3"></div>
</div>
<br/>



</body>
</html>

#box{
width:100px;
height:100px;
background-color:hotpink;
}
#box1{
Width:100px;
height:100px;
background-color:aquamarine;
}
#box2{
width:100px;
height:100px;
background-color:rgb(208,127,255);
}
#box3{
width:100px;
height:100px;
background-color: darkorange;
}
.oldBox{
width:100px;
height:100px;
background-color:royalblue;
}

.nexBox{
width:50px;
height:50px;
background-color:lightskyblue;
border:2px solid black;
}