用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 相关文章推荐
tagName的使用,留一笔
Jun 26 Javascript
分析 JavaScript 中令人困惑的变量赋值
Aug 13 Javascript
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
javascript+html5实现绘制圆环的方法
Jul 28 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
jquery实现全选功能效果的实现代码
May 05 Javascript
javascript实现滚动效果的数字时钟实例
Jul 21 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
vue中的计算属性的使用和vue实例的方法示例
Dec 04 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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校验ISBN码的函数代码
2011/01/17 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
javascript中对对层的控制
2006/12/29 Javascript
几行代码轻松搞定jquery实现flash8类似的连接效果
2007/05/03 Javascript
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
jQuery判断div随滚动条滚动到一定位置后停止
2014/04/02 Javascript
node.js集成百度UE编辑器
2015/02/05 Javascript
JS实现页面进入和返回定位到具体位置
2016/12/08 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
深入理解requireJS-实现一个简单的模块加载器
2018/01/15 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
uni-app 组件里面获取元素宽高的实现
2019/12/27 Javascript
vue-router的hooks用法详解
2020/06/08 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
简单介绍Python的轻便web框架Bottle
2015/04/08 Python
理解Python中函数的参数
2015/04/27 Python
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Selenium控制浏览器常见操作示例
2018/08/13 Python
使用python实现快速搭建简易的FTP服务器
2018/09/12 Python
Python基于百度云文字识别API
2018/12/13 Python
如何使用django的MTV开发模式返回一个网页
2019/07/22 Python
python ubplot使用方法解析
2020/01/10 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
html5拖拽应用记录及注意点
2020/05/27 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
《雪地里的小画家》教学反思
2014/02/22 职场文书
少先队学雷锋活动总结范文
2014/03/09 职场文书
优秀的导游求职信范文
2014/04/06 职场文书
责任胜于能力演讲稿
2014/05/20 职场文书
2016教师节问候语
2015/11/10 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
vue3中的组件间通信
2021/03/31 Vue.js
Pyhton模块和包相关知识总结
2021/05/12 Python