用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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
jQuery 1.5最新版本的改进细节分析
Jan 19 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
基于jquery实现百度新闻导航菜单滑动动画
Mar 15 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
Bootstrap3 模态框使用实例
Feb 22 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
关于antd tree 和父子组件之间的传值问题(react 总结)
Jun 02 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
PHP jQuery表单,带验证具体实现方法
2014/02/15 PHP
Web程序工作原理详解
2014/12/25 PHP
PHP中使用break跳出多重循环代码实例
2015/01/21 PHP
php编程每天必学之表单验证
2016/03/01 PHP
php实用代码片段整理
2016/11/12 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
jQuery队列控制方法详解queue()/dequeue()/clearQueue()
2010/12/02 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
js实现带有介绍的Select列表菜单实例
2015/08/18 Javascript
jQuery与js实现颜色渐变的方法
2016/12/30 Javascript
使用 jQuery 实现表单验证功能
2017/07/05 jQuery
js实现页面多个日期时间倒计时效果
2019/06/20 Javascript
nodejs实现聊天机器人功能
2019/09/19 NodeJs
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
2020/10/29 Javascript
vue 全局封装loading加载教程(全局监听)
2020/11/05 Javascript
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Django1.7+python 2.78+pycharm配置mysql数据库教程
2014/11/18 Python
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
儿童学习python的一些小技巧
2018/05/27 Python
linux环境中没有网络怎么下载python
2019/07/07 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
大学毕业后的十年规划
2014/01/07 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
学校募捐倡议书
2014/05/14 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
试用期自我评价范文
2015/03/10 职场文书
总结Pyinstaller打包的高级用法
2021/06/28 Python