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