用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 相关文章推荐
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
Js日期选择器并自动加入到输入框中示例代码
Aug 02 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
Dec 20 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jquery实现标签上移、下移、置顶
Apr 26 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
Bootstrap栅格系统的使用详解
Oct 30 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
创建echart多个联动的示例代码
Nov 23 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
Jquery 最近浏览过的商品的功能实现代码
2010/05/14 Javascript
jQuery中需要注意的细节问题小结
2011/12/06 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
浅析js预加载/延迟加载
2014/09/25 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
JSON基本语法及与JavaScript的异同实例分析
2019/01/04 Javascript
ES2020 新特性(种草)
2020/01/12 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
Python中操作mysql的pymysql模块详解
2016/09/13 Python
使用 Python 实现微信公众号粉丝迁移流程
2018/01/03 Python
python thrift搭建服务端和客户端测试程序
2018/01/17 Python
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
set在python里的含义和用法
2019/06/24 Python
Python之指数与E记法的区别详解
2019/11/21 Python
Python实现图片识别加翻译功能
2019/12/26 Python
使用python的pyplot绘制函数实例
2020/02/13 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
Pycharm常用快捷键总结及配置方法
2020/11/14 Python
HTML5教程之html 5 本地数据库(Web Sql Database)
2014/04/03 HTML / CSS
斯洛伐克家具和时尚装饰品购物网站:Butlers.sk
2019/09/08 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
公司人力资源的自我评价
2014/01/02 职场文书
杠杆的科学教学反思
2014/01/10 职场文书
关于迟到的检讨书
2014/01/26 职场文书
银行金融服务方案
2014/06/11 职场文书
2014年化妆品销售工作总结
2014/12/01 职场文书
销售员岗位职责
2015/02/10 职场文书
2015年防汛工作总结
2015/05/15 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript