無標題文件
.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>
請選擇背景顏色： | /td>##/td> ;
紅色 |
黃 |
藍色 |
< ;/tr>
請選擇寬度(px)： |
200< /td>
| 300 |
400
|
# 請選擇高(px)： |
c | 300 |
400
|
< /table>
恢復 | #;/td># # 確定 |
##
以上是分享一個關於JS的實例程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
-
1970-01-01 08:00:00
