5,17練習題二
阿新 • • 發佈:2018-05-18
() ima adding CA isp 鼠標 splay 彈出 gree
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style type="text/css"> *{ margin: 0px auto; padding: 0px; } #anniu{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu2{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu3{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu4{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; display: none; } #continer{ width:100%; height: 200px; background-color: red; } #anniu5{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; } #anniu6{ width:100px; height: 80px; text-align: center; line-height: 80px; background-color: blue; display: none; float:left; } </style> <body> <div id="anniu" onclick="tanChuang()">按鈕</div> <input type="button" name="" id="anniu2" value="按鈕" onclick="tanChuang()"/> <button id=anniu3 onclick="tanChuang()">按鈕</button> <br /> <br /> <label onmouseover="xianshi()" onmouseout="yincang()"><input type="checkbox" />鼠標經過出現按鈕</label> <button id="anniu4">按鈕</button> <br /> <br /> <div id="continer" onmouseover="yiRu()" onmouseout="yichu()">鼠標經過這個div變高變色,移出再恢復</div> <div id="anniu3" onclick="change1()">顏色1 </div> <br /> <br /> <div id="anniu3" onclick="change2()">顏色2 </div> <br /> <br /> <br /> <br /> <button id="anniu5" onclick="showhide()">按鈕1</button> <button id="anniu6" onclick="showhide()">按鈕2</button> </body> </html> <script type="text/javascript"> function tanChuang() { alert("彈出窗口"); } function xianshi(){ var div1 =document.getElementById("anniu4"); div1.style.display="block"; } function yincang(){ var div1 =document.getElementById("anniu4"); div1.style.display="none"; } function yiRu(){ var div2=document.getElementById("continer"); div2.style.width = "80%"; div2.style.height = "400px"; div2.style.backgroundColor ="green" } function yichu(){ var div2=document.getElementById("continer"); div2.style.width = "100%"; div2.style.height = "200px"; div2.style.backgroundColor ="red " } function change1(){ var bodycolor=document.body; bodycolor.style.backgroundColor="red"; } function change2(){ var bodycolor=document.body; bodycolor.style.backgroundColor="green"; } function showhide(){ var showhide = document .getElementById("anniu6").style.display; if(showhide==‘none‘){ document .getElementById("anniu6").style.display="block"; }else{ document .getElementById("anniu6").style.display="none"; } } </script>
5,17練習題二