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就将它遮盖了),就来问我怎么弄。
1722 0
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
738 3
Echarts自定义tooltip显示内容(隐藏小圆点)
Echarts自定义tooltip显示内容(隐藏小圆点)
305 0
通过select下拉框里的value控制div显示与隐藏
通过select下拉框里的value控制div显示与隐藏
89 0
|
Web App开发 容器
Div并排显示
Div并排显示