用JavaScript隐藏控件的方法_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>

时间: 2024-11-11 03:09:19

用JavaScript隐藏控件的方法_javascript技巧的相关文章

javascript模拟评分控件实现方法_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

javascript OFFICE控件测试代码_javascript技巧

复制代码 代码如下: //以下变量为JS公共变量 var TANGER_OCX_bDocOpen = false; var TANGER_OCX_filename;//文件名称 var filetype="";//文件类型 var savetype;//文件保存类型 var TANGER_OCX_OBJ; //控件对象 var TANGER_OCX_Username="匿名用户";//User Name var TANGER_OCX_key=""

javascript表单控件实例讲解_javascript技巧

本文实例为大家分享js表单控件多个实例讲解,供大家参考,具体内容如下 实例一:遍历表单的所有控件 <script type="text/javascript"> //遍历表单的所有控件 function getValues(){ var f = document.forms[0]; //获取表单DOM var elements = f.elements; //获取所有的控件数组 var str = ''; //拼接字符串 //循环遍历 for(var i=0; i<e

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

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

封装好的省市地区联动控件附下载_javascript技巧

所有的地址数据都放在js文件里面,调用该控件的方法很简单: <script type="text/javascript">  var area = new AreaCtrl("省份:","城市:","地区:");  area.write(); </script> AreaCtrl 类最多有3个参数,如上例的"省份","城市","地区",这里的文

javascript鼠标滑动评分控件完整实例_javascript技巧

本文实例讲述了javascript鼠标滑动评分控件.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript鼠标滑动控件</title

javascript实现日历控件(年月日关闭按钮)_javascript技巧

经常使用google的朋友一定对google绚丽的日历控件记忆犹新吧,那我们也来实现一个,虽然功能和效果比不上,但重要的是实现的过程. 下面是要实现的html结构: <div id="a"><div id="head"><span id="yface">年:<select id="year"></select></span><span id=&quo

JavaScript实现的日期控件具体代码_javascript技巧

复制代码 代码如下: <html> <head> <style> <!-- .wr{font-size: 12pt; line-height: 22px} .wr1 {  FONT-SIZE: 12px; LINE-HEIGHT: 200%} .wr2 {  FONT-SIZE: 14px; LINE-HEIGHT: 200%} .wr3 {  FONT-SIZE: 12px} .wr4 {  FONT-SIZE: 12px; LINE-HEIGHT: 150%}

如何通过javascript操作web控件的自定义属性_javascript技巧

在编程时,有时会使用web服务器控件的自定义属性.例如,TextBox控件中没有IsNotNull属性,但是我们可以自己添加一个IsNotNull属性,从而作为一个标记来方便我们编写程序. 虽然,IDE会提示"IsNotNull不是TextBox的属性"这个警告信息但是也不妨碍我们使用! 代码:<asp:TextBox ID="TextBox1" runat="server" IsNotNull="e"></