<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JS、CSS 简单的控制层的现实与隐藏—建站学-www.jzxue.com</title> <style> body{margin:0 auto;text-align:center;padding-top:180px;} div{width:100px;height:200px;background:#f00;margin:0 auto 10px;} </style> </head> <body> <div id="test" style="display:block">JS、CSS 简单的控制层的现实与隐藏—Y7L8’Blog</div> <input type="button" value="隐藏"; id="clickbutton"> <script type="text/javascript"> var obj=document.getElementById("test"); document.getElementById("clickbutton").onclick=function (){ if(obj.style.display=="block"){ obj.style.display="none"; document.getElementById("clickbutton").value="显示"; } else{ obj.style.display="block"; document.getElementById("clickbutton").value="隐藏"; } } </script> </body> </html>
运行代码复制代码另存代码收藏本页 [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]