js显示和隐藏DIV的方法

2025-02-21 技术教程

这篇文章主要为大家详细介绍了js显示和隐藏DIV的方法，文中示例代码介绍的非常详细，图文详解容易学习，非常适合初学者入门，感兴趣的小伙伴们可以参考一下。

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=GBK"/><scriptlanguage="JavaScript"type="text/JavaScript"></script><styletype="text/css"></style></head><body><form><inputtype="file"id="butn"value="显示/隐藏"onchange="toggle('div1')"/></form><center><divid="div1"></div></center>居中的DIV</body></html>

下面是更多参考资料：

<html><head><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"><title>div隐藏与显示</title><styletype=text/css>#menus{background-color:#c4cff0;}</style><scriptlanguage=javascript>functionLayer_HideOrShow(cur_div){varcurrent=document.getElementById(cur_div);if(current.style.visibility=="hidden"){current.style.visibility="visible";}else{current.style.visibility="hidden";}}</script></head><body><p>　</p><tableborder="0"width="153"cellpadding="0"style="border-collapse:collapse"id="table1"height="101"><tr><td><ahref="#"onclick="Layer_HideOrShow('menus');"><imgborder="0"src="https://cache.yisu.com/upload/information/20200311/54/212284.jpg"width="153"height="25"></a></td></tr><tr><td><divid="menus"><tableborder="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><metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/><title>无标题文档</title><scriptlanguage="JavaScript"type="text/JavaScript"></script><styletype="text/css"></style></head><body><inputtype="button"id="butn"value="显示/隐藏"onclick="toggle('div1')"/><center><divid="div1"></div></center>居中的DIV</body></html>=======================3.javascript控制html元素显示/隐藏1。编写js函数<scripttype="text/javascript">functiondisplay(id){vartraget=document.getElementById(id);if(traget.style.display=="none"){traget.style.display="";}else{traget.style.display="none";}}</script>2.要显示/隐藏的html元素加上id属性<table><trid="menu"><td>控制这个tr的显示/隐藏</td></tr></table>3，添加按钮，链接等触发js函数<inputtype="button"onclick="display('menu')"value="显示/隐藏"/><ahref="#"onclick="display('menu')">显示/隐藏</a>javascript显示隐藏层<divid=""style="display:none;">广告</div><inputtype="botton"onclick="函数"><scriptlanguage=javascript>function函数{if(thisdiv.style.display=='none'){thisdiv.style.display=""}elsethisdiv.style.display="none"}</script>你先给div取个ID=“AA”thisdiv=AAjavascript隐藏/显示表单对象javascript隐藏/显示表单对象[SCRIPTlanguage=JavaScript]functionexpandIt(el){whichEl=document.getElementById(el)if(whichEl.style.display=='none'){whichEl.style.display='';}else{whichEl.style.display='none';}}[/SCRIPT]el是对象的id，不管是tr或者table等等先设置一下id，然后进行调用。例：[aonclick="expandIt('ttchild');returnfalse"href="#"]tryit[/a][trid="ttchild"][tdwidth="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比较多……程序代码functionshowhidediv(id){try{varsbtitle=document.getElementById(id);if(sbtitle){if(sbtitle.style.display=='block'){sbtitle.style.display='none';}else{sbtitle.style.display='block';}}}catch(e){}

看完上诉内容，你们掌握js显示和隐藏DIV的方法了吗？如果想了解更多相关内容，欢迎关注亿速云行业资讯频道，感谢各位的阅读！