今天學習了js入門課程，聽的不多，做了個小練習，給div設定寬高、背景色。一點點都是進步。核心代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS入門_設定div寬、高、背景色</title>
<style>
*{
margin:0;
padding:0;
}
h2{
float: left;
}
#span1{
width:100px;
height:40px;
background: red;
text-align: center;
line-height: 40px;
display: inline-block;
#box{
height:100px;
border: 2px solid #000;
#con{
width:300px;
height:200px;
background: #fff;
border: 10px solid #d2d2d2;
margin: 0 auto;
padding: 20px;
display: none;
position: fixed;
top: 300px;
right:300px;
z-index: 2;
#red,#yellow,#blue,#width1,#width2,#width3,#height1,#height2,#height3{
display:inline-block;
width:36px;
height:33px;
line-height: 33px;
margin: 5px;
#width1,#width2,#width3,#height1,#height2,#height3{
background: #f1f1f1;
border: 1px solid #000;
#red{
#yellow{
background: yellow;
#blue{
background: blue;
.btn1,.btn2{
width:60px;
height:30px;
color: #fff;
border:1px solid #02f;
border-radius: 2px;
margin: 10px;
</style>
<script>
window.onload=function(){
oBody=document.getElementById('body');
oSpan1=document.getElementById('span1');
oCon=document.getElementById('con');
oBox=document.getElementById('box');
oRed=document.getElementById('red');
oYellow=document.getElementById('yellow');
oBlue=document.getElementById('blue');
oWidth1=document.getElementById('width1');
oWidth2=document.getElementById('width2');
oWidth3=document.getElementById('width3');
oHeight1=document.getElementById('height1');
oHeight2=document.getElementById('height2');
oHeight3=document.getElementById('height3');
oSpan1.onclick=function(){
oCon.style.display='block';
oBody.style.background='#c1c1c1';
oRed.onclick=function(){
box.style.background='red';
oYellow.onclick=function(){
box.style.background='yellow';
oBlue.onclick=function(){
box.style.background='blue';
oWidth1.onclick=function(){
box.style.width='200px';
oWidth2.onclick=function(){
box.style.width='300px';
oWidth3.onclick=function(){
box.style.width='400px';
oHeight1.onclick=function(){
box.style.height='200px';
oHeight2.onclick=function(){
box.style.height='300px';
oHeight3.onclick=function(){
box.style.height='400px';
</script>
</head>
<body id="body">
<div id="top">
<h2>請為下面的DIV設定樣式：</h2>
<span id="span1">點選設定</span>
</div>
<div id="box"></div>
<div id="con">
<p>請選擇背景色：<span id="red">紅</span><span id="yellow">黃</span><span id="blue">藍</span></p>
<p>請選擇寬(px)：<span id="width1">200</span><span id="width2">300</span><span id="width3">400</span></p>
<p>請選擇高(px)：<span id="height1">200</span><span id="height2">300</span><span id="height3">400</span></p>
<button class="btn1">恢複</button>
<button class="btn2">确定</button>
</body>
</html>
運作效果：
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)