<!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>
原文地址:https://www.cnblogs.com/zhengleilei/p/9062268.html
时间: 2024-10-14 10:23:22