js将控件隐藏的方法及display属性介绍

用JavaScript隐藏控件的方法有两种，分别是通过设置控件的style的“display”和“visibility”属性。当style.display="block"或style.visibility="visible"时控件或见，当style.display="none"或style.visibility="hidden"时控件不可见。不同的是“display”不但隐藏控件，而且被隐藏的控件不再占用显示时占用的位置，而“visibility”隐藏的控件仅仅是将控件设置成不可见了，控件仍然占俱原来的位置。
 

代码如下:

function displayHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display="none";
}
function displayShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.display=" ";//display为空的话会好使，为block会使后边的空间换行
}
function visibilityHideUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="hidden";
}
function visibilityShowUI()
{
     var ui = document.getElementById("bbs");
     ui.style.visibility="visible";
}
</script>

display:
值                    描述
none                  此元素不会被显示。
block                 此元素将显示为块级元素，此元素前后会带有换行符。
inline                默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block          行内块元素。（CSS2.1 新增的值）
list-item             此元素会作为列表显示。
run-in                此元素会根据上下文作为块级元素或内联元素显示。
compact CSS           中有值compact，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
marker CSS            中有值marker，不过由于缺乏广泛支持，已经从CSS2.1 中删除。
table                 此元素会作为块级表格来显示（类似<table>），表格前后带有换行符。
inline-table          此元素会作为内联表格来显示（类似<table>），表格前后没有换行符。
table-row-group       此元素会作为一个或多个行的分组来显示（类似<tbody>）。
table-header-group    此元素会作为一个或多个行的分组来显示（类似<thead>）。
table-footer-group    此元素会作为一个或多个行的分组来显示（类似<tfoot>）。
table-row             此元素会作为一个表格行显示（类似<tr>）。
table-column-group    此元素会作为一个或多个列的分组来显示（类似<colgroup>）。
table-column          此元素会作为一个单元格列显示（类似<col>）
table-cell            此元素会作为一个表格单元格显示（类似<td> 和<th>）
table-caption         此元素会作为一个表格标题显示（类似<caption>）
inherit               规定应该从父元素继承display 属性的值。

赞 (0)

相关推荐

  • JavaScript中的style.display属性操作

    display版本:CSS1/CSS2    兼容性:IE4+   NS4+ 继承性:无 语法:      display   :   block   |   none   |   inline   |   compact   |   marker   |   inline-table   |   list-item   |   run-in   |   table   |table-caption   |   table-cell   |   table-column   |   table-

  • js将控件隐藏的方法及display属性介绍

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

  • js将控件隐藏及display属性的使用介绍

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility="hidden"时控件不可见.不同的是"display"

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

  • ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    ASP.NET中日历控件和JS版日历控件的使用方法（第5节）

    今天小编带大家以做任务的形式了解ASP.NET中日历控件的使用方法,主要任务内容: 1.添加一个日历,设置日期以蓝色的完整名称显示,周末以黄色背景红色文字显示,而当前日期使用绿色背景显示,用户可以选择一天.一周或整个月,被选的天/周/月使用灰色背景色来显示.当选中一个日期后,把时间显示在下面的一个文本框中,效果如图所示: 2.设计一个注册页面,使用js日历控件帮助用户输入出生日期.效果如图所示: 学习项目一  Calendar日历控件 1.在站点下创建一个Calendar页面,并在页面上拖放一个

  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    本文实例讲述了JS禁用页面上所有控件的实现方法.分享给大家供大家参考,具体如下: 利用页面元素的特征,可以捕捉到所有元素. function DisableElements(container,blnHidenButton) { if (!container) return; var aEle; if (navigator.appName =="Microsoft Internet Explorer") //IE { for (var i=0;i<container.all.le

  • jquery UI Datepicker时间控件的使用方法（加强版）

    jquery UI Datepicker时间控件的使用方法（加强版）

    先来看看Datepicker插件的属性表: 第一个日历插件的使用实例 首先导入需要的类库文件: <</SPAN>scripttype="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.7.1.min.js"></</SPAN>script> <</SPAN>scripttype="text/javas

  • JS日期控件My97DatePicker基本用法

    My97DatePicker是一款非常灵活好用的日期控件.使用非常简单.  1.下载My97DatePicker组件包  下载地址:https://www.jb51.net/jiaoben/18012.html 2.在页面中引入该组件js文件:  <script type="text/JavaScript" src="My97DatePicker/WdatePicker.js"></script>  3.例子 <!DOCTYPE HTM

  • ASP.NET中 TextBox 文本输入框控件的使用方法

    ASP.NET中 TextBox 文本输入框控件的使用方法

    TextBox控件又称文本框控件,为用户提供输入文本的功能. 1．属性 TextBox控件的常用属性及说明如表1所示. 表1 TextBox控件常用属性及说明 属性 说明 AutoPostBack 获取或设置一个值,该值指示无论何时用户在TextBox控件中按〈Enter〉键或〈Tab〉键时,是否自动回发到服务器的操作 CausesValidation 获取或设置一个值,该值指示当TextBox控件设置为在回发发生时进行验证,是否执行验证 ID 控件ID Text 控件要显示的文本 TextMo

  • ajax获取php页面的返回参数,控件赋值的方法

    js页面 $.ajax({ type : "get", url : "", //跳转页面 data :"m=content&c=favorite&a=del_favorite&shoucangId="+_id,//传递的参数 datatype : "html", async:'false', success : function(data) //返回值 { if(data !=null) { var s

  • JS 日历控件(蓝色)

    超漂亮的JS日历控件 *{ font:12px; letter-spacing:0px; } body{ background-color:#E5E9F2; overflow:hidden; margin:0; border:0px; } #titleYear{ text-align:center; padding-top:3px; width:120px; height:20px; border:solid #E5E9F2; border-width:0px 1px 1px 0px; back

随机推荐