<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>javascript练习</title> <style type="text/css"> #box{width:100px;height: 100px;background:red;margin: 20px 80px;} </style> <body> <!--用按钮控制div高度、狂赌、颜色、重置、隐藏、显示--> <script type="text/javascript"> var box window.onload=function(){ box=document.getElementById('box') } function aa(){ box.style.height="400px"//改变高度 } function bb(){ box.style.width="400px"//改变宽度 } function cc(){ box.style.background="pink"//改变颜色 } function dd(){ box.style.height="100px"//重置高度 box.style.width="100px"//重置宽度 box.style.background="red"//重置颜色 } function ee(){ box.style.visibility="hidden"//隐藏 可用display="none" } function ff(){ box.style.visibility="visible"//显示 可用display="block" } </script> <div id="box"></div> <input type="button" value="变高" onclick="aa()"> <input type="button" value="变宽" onclick="bb()"> <input type="button" value="变色" onclick="cc()"> <input type="button" value="重置" onclick="dd()"> <input type="button" value="隐藏" onclick="ee()"> <input type="button" value="显示" onclick="ff()"> </body> </html>
本案例要点:window.onload利用页面加载生成全局变量,在按钮内部设置onclick点击事件调用函数控制DIV样式变化。将第display="none"修改成visibility="hidden",隐藏效果会好一点,本身占用的空间不会变化,显示功能能display="block"修改成visibility="visible"就可以实现隐藏和显示功能