用JavaScript隐藏控件的方法

当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>

赞 (0)

相关推荐

  • 用JavaScript隐藏控件的方法

    当style.display="block"或style.visibility="visible"时控件或见,当style.display = "none"或style.visibility = "hidden"时控件不可见.不同的是"display"不但隐藏控件,而且被隐藏的控件不再占用显示时占用的位置,而"visibility"隐藏的控件仅仅是将控件设置成不可见了,控件仍然占俱原来的

  • 微信小程序动态的显示或隐藏控件的方法(两种方法)

    微信小程序动态的显示或隐藏控件的方法(两种方法)

    在微信小程序开发时,经常要用到一个控件会根据不同的情况和环境动态显示与隐藏这种情况,下面就来实践一把!上效果先 它的实现方法有两种, 第一种方法:单选法,就是隐藏与显示根据条件二选一,代码如下: <view class="{{showView?'bright789_view_show':'bright789_view_hide'}}"> <text class="bright789-text">我是被显示被隐藏控件</text>

  • javascript模拟评分控件实现方法

    本文实例讲述了javascript模拟评分控件实现方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动态设置style(评分效果)</titl

  • 解决ASP.NET回传后div滚动条位置复位的问题(利用隐藏控件原理)

    首先是为DIV添加一个onscroll="javascript:setScollTop()" 的方法(当然不一定是DIV其他的标签思路应该也是这样的) 复制代码 代码如下: <div style="overflow: auto; height: 152px" align="left" id="dvScoll_1"   onscroll="javascript:setScollTop()">www

  • ASP.NET Calendar日历(日期)控件使用方法

    ASP.NET Calendar日历(日期)控件使用方法

    Calendar 控件显示一个日历,用户可通过该日历导航到任意一年的任意一天.当 ASP.NET 网页运行时,Calendar 控件以 HTML 表格的形式呈现.因此,该控件的许多属性与多种不同的表格格式相符.在这些属性中,有几个在一些低版本的浏览器中不能得到完全支持,因此在这些浏览器中并不能使用所有的格式功能. 使用 Calendar 控件在网页上显示日历的单个月.该控件使您可以选择日期并移到下个月或上个月.Calendar 控件支持 System.Globalization 命名空间中的所有

  • 支持IE,Firefox的javascript 日历控件

    支持IE,Firefox的javascript 日历控件

    效果图:其实学习的方法,就是会搜索的方法,会搜索才能更快的解决问题.搜索方法: javascript 日历控件 site:jb51.net| 日期输入框演示-jb51.net script body{font-size:12px;font-family:Verdana,Arial,"宋体";} a:link {color:#464646;text-decoration:none;} a:visited {color:#464646;text-decoration:none;}ifram

  • Qt实现自定义验证码输入框控件的方法

    Qt实现自定义验证码输入框控件的方法

    前言 本文实现了自定义的验证码输入框控件.控件包括图标.输入框.获取验证码按钮.验证码获取倒计时标签.支持鼠标点击获取验证码按钮后开始显示倒计时功能,倒计时为0时,才可以在此点击获取验证码按钮.效果如图: 主要的编程思想还是实现自定义控件的封装性和共用性. UI布局: 控件1:QWidget,实现整个控件的封装,这个控件使用水平布局,实现控件的水平摆放,同时,当其中一个控件隐藏时,位置会重新更新,实现在控件的后面只显示获取验证码和倒计时两个控件中的一个. 控件2:QLabel,实现展示盾牌图标.

  • .Net遍历窗体上控件的方法

    本文实例讲述了.Net遍历窗体上控件的方法.分享给大家供大家参考.具体分析如下: 本例实现遍历窗体上的控件以及找出TextBox控件,代码如下: 复制代码 代码如下: foreach( Control control in this.Controls ) {    if( control  is  TextBox )    //判断是否是TextBox控件    {        //TODO...         TextBox textBox=control;     //里氏转换     

  • ASP.NET动态添加用户控件的方法

    本文实例讲述了ASP.NET动态添加用户控件的方法.分享给大家供大家参考.具体实现方法如下: 为了让用户控件能ASP.NET页面实现动态添加,首先写一个接口IGetUCable,这个接口有一个函数,返回对象类型是UserControl. using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; /// <summary> /// Summar

  • WPF中引入WindowsForms控件的方法

    本文实例讲述了WPF中引入WindowsForms控件的方法.分享给大家供大家参考,具体如下: 环境: [1]WindowsXP with SP3 [2]VS2008 with SP1 正文: Step1:在现有工程中引入Windows Forms 鼠标右键[References]->选择[Add Reference]->[.NET]标签页 加入[WindowsFormsIntegration]和[System.Windows.Forms]两项 Step2:在XAML文件里加入 [S2-1]加

随机推荐