用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 相关文章推荐
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
Nov 30 Javascript
Jquery图片滚动与幻灯片的实例代码
Apr 08 Javascript
jQuery知识点整理
Jan 30 Javascript
js实现文字跟随鼠标移动而移动的方法
Feb 28 Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
bootstrap suggest搜索建议插件使用详解
Mar 25 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
详解react native页面间传递数据的几种方式
Nov 07 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
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
非常不错的MySQL优化的8条经验
2008/03/24 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
CI框架常用函数封装实例
2016/11/21 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
基于MooTools的很有创意的滚动条时钟动画
2010/11/14 Javascript
extjs实现选择多表自定义查询功能 前台部分(ext源码)
2011/12/20 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
[27:39]Ti4 循环赛第二日 LGD vs Fnatic
2014/07/11 DOTA
Python isinstance判断对象类型
2008/09/06 Python
python学习 流程控制语句详解
2016/06/01 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
利用python如何处理百万条数据(适用java新手)
2018/06/06 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
numpy.where() 用法详解
2019/05/27 Python
Python语言异常处理测试过程解析
2020/01/08 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
Django-xadmin+rule对象级权限的实现方式
2020/03/30 Python
python如何调用java类
2020/07/05 Python
Python如何将模块打包并发布
2020/08/30 Python
纯DOM+CSS3实现简单的小风车动画
2016/09/27 HTML / CSS
退休教师欢送会主持词
2014/03/31 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2016年感恩节寄语
2015/12/07 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
mysql的数据压缩性能对比详情
2021/11/07 MySQL