Teilen Sie einen Beispielcode über JS
javascript
代码
Betrieb
学习
< html xmlns="www.w3.org/1999/xhtml">
<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("c1");<br> var color2=document.getElementById("c2");<br> var color3=document.getElementById("c3");<br> var width1=document.getElementById("w1 ");<br> var width2=document.getElementById("w2");<br> var width3=document.getElementById("w3");<br> var height1=document.getElementById("h1");<br> var 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><br> color1.onclick=function(){<br> dv1.style.background='#F00';<br> }<br> color1.onmouseover=function(){<br> color1 .style.background='#F00';<br> }<br> color1.onmouseout=function(){<br> color1.style.background='#99CC66';<br> }<br><br> color2 .onclick=function(){<br> dv1.style.background='#FF0';<br> }<br> color2.onmouseover=function(){<br> color2.style.background='#FF0'; <br> }<br> color2.onmouseout=function(){<br> color2.style.background='#CCCC00';<br> }<br><br> color3.onclick=function(){<br> dv1.style.background='#00F';<br> }<br> color3.onmouseover=function(){<br> color3.style.background='#00F';<br> }<br> color3.onmouseout =function(){<br> color3.style.background='#3399CC';<br> }<br><br> width1.onclick=function(){<br> dv1.style.width='200px'; <br> .Stil .background='#CCC';<br> }<br><br> width2.onclick=function(){<br> dv1.style.width='300px';<br> }<br> width2.onmouseover= function(){<br> width2.style.background='#F90';<br> }<br> width2.onmouseout=function(){<br> width2.style.background='#CCC';<br> }<br><br> width3.onclick=function(){<br> dv1.style.width='400px';<br> }<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设置样式： | 点击设置 |
| 请选择背景颜色： | 红 | 黄 | 蓝 |
| 请选择宽(px)： | 200< /td> | 300 | 400 |
| 请选择高(px)： | 300 | 400 |
| 恢复 | 确定 |