分享一個關於JS的實例程式碼

無標題文件

.dv { width:800px;高度：600px；文字對齊：居中;}
.td2 { 寬度：80px;高度：30px；邊框：實心#CCC 1px；背景：#F00；顏色：#FFF；文字對齊：居中；位置：相對;}
.dv1 { 寬度：150px;高度：150px；邊框：實心 #000 3px;}
.dv2 { 寬度：300px;高度：250px；邊框：實心#CCC 20px；位置：絕對；頂部：100px；左：460px；顯示：無；背景：#FFF;}
.td3 { 寬度：30px;高度：30px；邊框：實心#999 1px；文字對齊：居中；顏色：#FFF;}
.td4 { 寬度：30px;高度：30px；邊框：實心#999 1px；文字對齊：居中；顏色：#666；背景：#CCC;}
.td5 { 寬度：60px;高度：30px；邊框：實心#999 1px；文字對齊：居中；顏色：#FFF；背景：#009;}
.tb { padding-left:70px; padding-top:20px;}

<script><br/>window.onload=function(){<br/>    var td1=document.getElementById("td");<br/> var dv0=document.getElementById("dva");<br/> var dv1=document.getElementById("dvv");<br/> var dv2=document.getElementById("dve");<br/> var color1=document.getElementById("dve");<br/> var color1=document. ("c1");<br/>    var color2=document.getElementById("c2");<br/>    var color3=document.getElementById("c3");<br/>    var width1=document.getElementBy. ;<br/>    var width2=document.getElementById("w2");<br/>    var width3=document.getElementById("w3");<br/>    var height1= #ument.getElementById("h1var" height2=document.getElementById("h2");<br/> var height3=document.getElementById("h3");<br/> var re=document.getElementById("recover");<br/> var su=document .getElementById ("sure");<br/><br/>    td1.onclick=function(){<br/>        dv2.style.display='block';<br/>        dv0.style.background='#999999;# }<br/><br/>    color1.onclick=function(){<br/>        dv1.style.background='#F00';<br/>        } 。 =function(){<br/>        dv1.style.background='#FF0';<br/>        }<br/>    color2.onmouseover=function(){<br/>      color2.onmouseover=function(){<br/>     .> #        }<br/>    color2.onmouseout=function(){<br/>        color2.style.background='#CCCC00';<br/>      1p. style.background='#00F';<br/>        }<br/>#    color3.onmouseover=function(){<br/>        color3.style.background='#00F'        color3.style.background='#00F'        color 。 #        }<br/>    width1.onmouseover=function(){<br/>        width1.style.background='#F90';##c  c )1.style.background='#F90';##    width1.style .background ='#CCC';<br/>        }<br/><br/>    width2.onclick=function(){<br/>        dv1.style.width='300px'     dv1。 ){<br/>        width2.style.background='#F90';<br/>       }<br/>    width2.onmouseout=function(ground){<br/>#.>    <br/>##    width3.onclick=function(){<br/>        dv1.style.width='400px';<br/>       style }<br/> width3.onmouseover=function(){<br/> width3.style.background=&#39;#F90&#39;;<br/> }<br/> width3.onmouseout=function(){<br/> width3.style.background=&#39;#CCC&#39;;<br/> }<br/><br/> height1.onclick=function(){<br/> dv1.style.height=&#39;200px&#39;;<br/> }<br/> height1.onmouseover=function(){<br/> height1.style.background=&#39;#F90&#39;;<br/> }<br/> height1.onmouseout=function(){<br/> height1.style.background=&#39;#CCC&#39;;<br/> }<br/><br/> height2.onclick=function(){<br/> dv1.style.height=&#39;300px&#39;;<br/> }<br/> height2.onmouseover=function(){<br/> height2.style.background=&#39;#F90&#39;;<br/> }<br/> height2.onmouseout=function(){<br/> height2.style.background=&#39;#CCC&#39;;<br/> }<br/><br/> height3.onclick=function(){<br/> dv1.style.height=&#39;400px&#39;;<br/> }<br/> height3.onmouseover=function(){<br/> height3.style.background=&#39;#F90&#39;;<br/> }<br/> height3.onmouseout=function(){<br/> height3.style.background=&#39;#CCC&#39;;<br/> }<br/><br/> re.onclick=function(){<br/> dv1.style.width=&#39;150px&#39;;<br/> dv1.style.height=&#39;150px&#39;;<br/> dv1.style.background=&#39;none&#39;;<br/> }<br/><br/> su.onclick=function(){<br/> dv2.style.display=&#39;none&#39;;<br/> dv0.style.background=&#39;none&#39;;<br/> }<br/> }<br/></script>