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 = "aquamarine ";
}
var oBtn2 = document.getElementById("btn2");
var oBox2 = document.getElementById("box2");
oBtn2.onclick = function(){
var attr = document.getElementById("attr").getAttribute("value");
var val = document.getElementById("val").value;
oBox1.style[attr] = val;
}
var oBtn3 = document.getElementById("btn3");
var oBox3 = document.getElementById("box3");
oBtn3.onclick = function(){
var val = document.getElementById("csssTextVal").value;
console.log(val)
oBox3.style.cssText = val;
}
var oBtn4 = document.getElementById("btn4");
var oBox4 = document.getElementById("box4");
oBtn4.onclick = function(){
oBox4.setAttribute("class","nexBox");
}
var oBtn5 = document.getElementById("btn5");
oBtn5.onclick = function(){
console.log("line 50"+oBox3.style.width);
console.log("line 51"+getComputedStyle(oBox3).width);
}
var oBtn6 = document.getElementById("btn6");
oBtn6.onclick = function(){
console.log("line 56"+oBox3.style.width);
console.log("line 57"+getComputedStyle(oBox4).width);
}
}
<!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:lightsktblue">设置颜色</button>
<div id="box1"></div>
</div>
</br>
<div>
<button id="btn2" style="background-color:lightsktblue">设置样式属性</button>
<label>属性：</label>
<input id = "attr" type="text"></input>
</br>
<label>取值：</label>
<input id = "val" type="text"></input>
<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/>
<br/>
<div>
<button id="btn4">切换样式</button>
<div id="box4" class="oldBox"></div>
<button id="btn6">获取宽度</button>
</div>
<br/>
</body>
</html>
<!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:lightsktblue">设置颜色</button>
<div id="box1"></div>
</div>
</br>
<div>
<button id="btn2" style="background-color:lightsktblue">设置样式属性</button>
<label>属性：</label>
<input id = "attr" type="text"></input>
</br>
<label>取值：</label>
<input id = "val" type="text"></input>
<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/>
<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:aquamarine;
}
#box3{
width:100px;
height: 100px;
background-color:antiquewhite;
}
.oldBox
{
width:100px;
height: 100px;
background-color:brown;
}
.newBox
{
width:50px;
height:50px;
background-color:coral;
}