用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 相关文章推荐
javascript 有用的脚本函数
May 07 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
全国省市二级联动下拉菜单 js版
May 10 Javascript
Bootstrap框架下下拉框select搜索功能
Mar 26 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
Vue中keep-alive的两种应用方式
Jul 15 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
2014/09/28 PHP
php使用parse_url和parse_str解析URL
2015/02/22 PHP
Ubuntu中启用php的mail()函数并解决发送邮件速度慢问题
2015/03/27 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
Zend Framework教程之响应对象的封装Zend_Controller_Response实例详解
2016/03/07 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
jqgrid 表格数据导出实例
2013/11/21 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
JS图片自动轮换效果实现思路附截图
2014/04/30 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
jQuery移动web开发之页面跳转和加载外部页面的实现
2015/12/04 Javascript
jQuery实现表格行和列的动态添加与删除方法【测试可用】
2016/08/01 Javascript
nodeJS实现路由功能实例代码
2017/06/08 NodeJs
vue如何判断dom的class
2018/04/26 Javascript
seajs下require书写约定实例分析
2018/05/16 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python实现的简单抽奖系统实例
2015/05/22 Python
Python常用的爬虫技巧总结
2016/03/28 Python
Python环境下搭建属于自己的pip源的教程
2016/05/05 Python
python利用urllib实现爬取京东网站商品图片的爬虫实例
2017/08/24 Python
Python文件循环写入行时防止覆盖的解决方法
2018/11/09 Python
python打造爬虫代理池过程解析
2019/08/15 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
简单了解django处理跨域请求最佳解决方案
2020/03/25 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
美国最大的购物网站:Amazon.com(亚马逊美国)
2020/05/23 全球购物
实习生个人找工作的自我评价
2013/10/30 职场文书
化工专业推荐信范文
2013/11/28 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
闪闪的红星观后感
2015/06/08 职场文书
儿子满月酒致辞
2015/07/29 职场文书
2016年国庆节假期旅游工作总结
2016/04/01 职场文书
插件导致ECharts被全量引入的坑示例解析
2022/09/23 Javascript