分享一個關於JS的實例程式碼
- 零下一度原創
- 2017-06-26 15:16:42976瀏覽
無標題文件
.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='#F90';<br/> }<br/> width3.onmouseout=function(){<br/> width3.style.background='#CCC';<br/> }<br/><br/> height1.onclick=function(){<br/> dv1.style.height='200px';<br/> }<br/> height1.onmouseover=function(){<br/> height1.style.background='#F90';<br/> }<br/> height1.onmouseout=function(){<br/> height1.style.background='#CCC';<br/> }<br/><br/> height2.onclick=function(){<br/> dv1.style.height='300px';<br/> }<br/> height2.onmouseover=function(){<br/> height2.style.background='#F90';<br/> }<br/> height2.onmouseout=function(){<br/> height2.style.background='#CCC';<br/> }<br/><br/> height3.onclick=function(){<br/> dv1.style.height='400px';<br/> }<br/> height3.onmouseover=function(){<br/> height3.style.background='#F90';<br/> }<br/> height3.onmouseout=function(){<br/> height3.style.background='#CCC';<br/> }<br/><br/> re.onclick=function(){<br/> dv1.style.width='150px';<br/> dv1.style.height='150px';<br/> dv1.style.background='none';<br/> }<br/><br/> su.onclick=function(){<br/> dv2.style.display='none';<br/> dv0.style.background='none';<br/> }<br/> }<br/></script>
请为下面的DIV设置样式： | 点击设置 |
| 請選擇背景顏色： | /td>##/td> ;紅色 | 黃 | 藍色 |
| 請選擇寬度(px)： | 200< /td> | 300 | 400 |
| 請選擇高(px)： | c | 300 | 400 |
| 恢復 | #;/td># #確定 |