这篇文章主要为大家详细介绍了js显示和隐藏DIV的方法，文中示例代码介绍的非常详细，图文详解容易学习，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。
计算
安全
数据库
网络和加速
企业服务
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK" /> <script language="JavaScript" type="text/JavaScript"> <!-- function toggle(targetid){ if (document.getElementById){ target=document.getElementById(targetid); if (target.style.display=="block"){ target.style.display="none"; } else { target.style.display="block"; } } } //--> </script> <style type="text/css"> <!-- #div1{ background-color:#360; height:400px; width:400px; display:none; } --> </style> </head> <body> <form> <input type="file" id="butn" value="显示/隐藏" onchange="toggle('div1')" /> </form> <center> <div id="div1"></div> </center> 居中的DIV </body> </html> 下面是更多参考资料：
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>div隐藏与显示</title> <style type=text/css> #menus { background-color: #c4cff0; } </style> <script language=javascript> function Layer_HideOrShow(cur_div) { var current=document.getElementById(cur_div); if(current.style.visibility=="hidden") { current.style.visibility ="visible"; } else { current.style.visibility ="hidden"; } } </script> </head> <body> <p> </p> <table border="0" width="153" cellpadding="0" style="border-collapse: collapse" id="table1" height="101"> <tr> <td> <a href="#" onclick="Layer_HideOrShow('menus');"><img border="0" src="https://cache.yisu.com/upload/information/20200311/54/212284.jpg" width="153" height="25"></a></td> </tr> <tr> <td> <div id="menus"> <table border="0" width="100%" cellpadding="0" style="border-collapse: collapse" height="150" id="table2"> <tr> <td> </td> </tr> </table> </div></td> </tr> </table> </body> </html> ==================== <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script language="JavaScript" type="text/JavaScript"> <!-- function toggle(targetid){ if (document.getElementById){ target=document.getElementById(targetid); if (target.style.display=="block"){ target.style.display="none"; } else { target.style.display="block"; } } } --> </script> <style type="text/css"> <!-- #div1{ background-color:#000000; height:400px; width:400px; display:none; } --> </style> </head> <body> <input type="button" id="butn" value="显示/隐藏" onclick="toggle('div1')" /> <center> <div id="div1"></div></center> 居中的DIV </body> </html> ======================= 3.javascript 控制 html元素 显示/隐藏 1。编写js函数 <script type="text/javascript"> function display(id){ var traget=document.getElementById(id); if(traget.style.display=="none"){ traget.style.display=""; }else{ traget.style.display="none"; } } </script> 2. 要显示/隐藏的html元素加上 id 属性 <table> <tr id="menu" > <td>控制这个tr的显示/隐藏</td> </tr> </table> 3，添加按钮，链接等触发 js 函数 <input type="button" onclick="display('menu')" value="显示/隐藏"/> <a href="#" onclick="display('menu')" >显示/隐藏</a> javascript显示隐藏层<div id="" style="display:none;">广告</div> <input type="botton" onclick="函数"> <script language=javascript> function 函数{ if(thisdiv.style.display=='none'){ thisdiv.style.display="" } else thisdiv.style.display="none" } </script>你先给div 取个ID=“AA”thisdiv=AA javascript隐藏/显示表单对象 javascript隐藏/显示表单对象 [SCRIPT language=JavaScript] function expandIt(el) { whichEl =document.getElementById(el) if (whichEl.style.display == 'none') { whichEl.style.display = ''; } else { whichEl.style.display = 'none'; } } [/SCRIPT] el是对象的id，不管是tr或者table等等先设置一下id，然后进行调用。 例： [a onclick="expandIt('ttchild'); return false" href="#" ]try it[/a] [tr id="ttchild"][td width="18"]Example[/td][/tr] 使用时把[]变成<> javascript控制页面控件隐藏显示的两种方法 javascript控制页面控件隐藏显示的两种方法，方法的不同之处在于控件隐藏后是否还在页面上占位 方法一： document.all["PanelSMS"].style.visibility="hidden"; document.all["PanelSMS"].style.visibility="visible"; 方法二： document.all["PanelSMS"].style.display="none"; document.all["PanelSMS"].style.display="inline"; 方法一隐藏后 页面的位置还被控件占用 只是不显示 类似于.net验证控件的Display=Static 方法二隐藏后 页面的位置不被占用 类似于.net验证控件的Display=Dynamic ==================== 这个方法来我是从一个boblog模板上找到的，其实网络上也可以搜索到；只是网络上不看效果的转载让人难辩代码的错对和方便。用这个方法比用《给zblog再增3个功能：防刷、收缩侧栏、复制加版权》的效果要好，纯css隐藏div会刷新页面，但用js就不会了。 js代码如下，新建一个txt文件，复制进去，保存并修改文件后缀为js（例open.js）即可。我是把这个文件放在zblog的SCRIPT文件夹里，这里js比较多…… 程序代码function showhidediv(id){ try{ var sbtitle=document.getElementById(id); if(sbtitle){ if(sbtitle.style.display=='block'){ sbtitle.style.display='none'; }else{ sbtitle.style.display='block'; } } }catch(e){} 看完上诉内容，你们掌握js显示和隐藏DIV的方法了吗？如果想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
