用JavaScript隐藏控件的方法


Posted in Javascript onSeptember 21, 2009

当style.display="block"或style.visibility="visible"时控件或见,当style.display = "none"或style.visibility = "hidden"时控件不可见。
不同的是“display”不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而“visibility”隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的位置。
<p>
<input id='control' value="想要隐藏的控件">
</p>
<p>
隐藏上面的控件,并使其不占用页面上的位置
<input type="button" value='隐藏' onclick='displayHide_control()'>
<input type="button" value='显示' onclick='displayShow_control()'>
<br />
仅仅隐藏控件,其位置仍然占用
<input type="button" value='隐藏' onclick='visibilityHide_control()'>
<input type="button" value='显示' onclick='visibilityShow_control()'>
</p>
<script language="javascript" type="text/javascript">
function displayHide_control()
{
var _control = document.getElementById("control");
_control.style.display="none";
}
function displayShow_control()
{
var _control = document.getElementById("control");
_control.style.display="block";
}
function visibilityHide_control()
{
var _control = document.getElementById("control");
_control.style.visibility="hidden";
}
function visibilityShow_control()
{
var _control = document.getElementById("control");
_control.style.visibility="visible";
}
</script>

Javascript 相关文章推荐
HTML IMG标签 onload 内存溢出导致浏览器CPU占用过高
Mar 09 Javascript
jQuery前台数据获取实现代码
Mar 16 Javascript
js实现点击图片将图片地址复制到粘贴板的方法
Feb 16 Javascript
辨析JavaScript中的Undefined类型与null类型
May 26 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
jQuery 常见小例汇总
Dec 14 Javascript
使用JavaScript为一张图片设置备选路径的方法
Jan 04 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
JavaScript计算正方形面积
Nov 26 Javascript
JS通用方法触发点击事件代码实例
Feb 17 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 #Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 #Javascript
用jQuery技术实现Tab页界面之二
Sep 21 #Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 #Javascript
一个js写的日历(代码部分网摘)
Sep 20 #Javascript
下载站控制介绍字数显示的脚本 显示全部 隐藏介绍等功能
Sep 19 #Javascript
js表格分页实现代码
Sep 18 #Javascript
You might like
php strnatcmp()函数的用法总结
2013/11/27 PHP
php实现aes加密类分享
2014/02/16 PHP
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php函数serialize()与unserialize()用法实例
2014/11/06 PHP
PHP中使用curl入门教程
2015/07/02 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
extjs 为某个事件设置拦截器
2010/01/15 Javascript
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
jquery isEmptyObject判断是否为空对象的函数
2011/02/14 Javascript
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
2016/01/06 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
js 中rewrap-ajax.js插件实例代码
2017/10/20 Javascript
d3.js实现自定义多y轴折线图的示例代码
2018/05/30 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
9102了,你还不会移动端真机调试吗
2019/03/25 Javascript
详解Vue-Router源码分析路由实现原理
2019/05/15 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
2019/05/20 Javascript
vue中get请求如何传递数组参数的方法示例
2019/11/08 Javascript
[02:20]DOTA2亚洲邀请赛 EHOME战队出场宣传片
2015/02/07 DOTA
Python利用前序和中序遍历结果重建二叉树的方法
2016/04/27 Python
Python模拟随机游走图形效果示例
2018/02/06 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python函数返回不定数量的值方法
2019/01/22 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
pycharm 实现复制一行的快捷键
2021/01/15 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
师德师风建设整改措施思想汇报
2014/10/11 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
收入证明范本
2015/06/12 职场文书
Java死锁的排查
2022/05/11 Java/Android
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers