div的显示和隐藏

简介: 本文从学习角度出发,仅当做笔记。高手可以忽略本文。   借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间。 js控制显示和隐藏的代码: 1 2 function showDiv(obj){ 3 document.

本文从学习角度出发,仅当做笔记。高手可以忽略本文。

 

借助div的display属性可以实现div的显示或隐藏,而且在隐藏后不占用原来显示的空间。

js控制显示和隐藏的代码:

 1 <script type="text/javascript">
 2         function showDiv(obj){
 3         document.getElementById(obj).style.display="";
 4         //alert('已经显示');
 5         }
 6     function hideDiv(obj){
 7         document.getElementById(obj).style.display="none";
 8         //alert('已经隐藏');
 9         }
10     </script>

HTML:

1     <input name="btnShow" type="button" value="显示" onClick="showDiv('div1');">
2     <input name="btnHide" type="button" value="隐藏" onClick="hideDiv('div1');">
3     <div id="div1" style=" width:300px; height:200px; border:1px solid red;">
4        show it
5     </div>

这个有时候在界面的设计上会用得到。

 

相关文章
|
Web App开发 JavaScript 程序员
如何去掉或者修改网页中的遮罩层,DIV等元素?
起因: 前几天女友在查资料写文章,打开一个网页,发现网页的被一个半透明的遮罩层给覆盖了(一个已经过期的组织活动 的网页,H5就将它遮盖了),就来问我怎么弄。
1567 0
|
5月前
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
38 0
|
5月前
两个div并列一行显示的多种方法
两个div并列一行显示的多种方法
|
Web App开发 容器
Div并排显示
Div并排显示
|
前端开发
内容滚动条和子 div 高度自适应
一个div里面,两个子div高度自适应(平分父div的高度)和元素内容过多的时候,根据需求出现高度滚动条或者宽度滚动条。 先放最终效果(在下面会有demo代码。): Paste_Image.png 实现这些效果要怎么做呢?咱一步一步来。 第一步: 先设置html结构:这里我已经搭好了。 第二步然后开始写css样式了 设置父元素box的样式 设置box1的样式 现在尝试把html解除注释 下面就到了关键的部分了(文章末尾有demo,不想看的话,可以自己试试。): 在上面我们已经设置了最大高度和最小高度,因为box1空间不够所以溢出来了。
722 0
内容滚动条和子 div 高度自适应
|
JSON 前端开发 JavaScript
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
小记录 单选框的注意点 html中字符串拼接 el-upload手动上传 表格跳转 v-for动态添加背景色 控制label标签于文本框之间的间距
【Layui】修改页面的宽
【Layui】修改页面的宽
191 0
【Layui】修改页面的宽