js设置控件的隐藏与显示的两种方法

2015-03-15  来源:本站原创  分类:javascript技巧  人气:0 

js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下

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

值 描述
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属性的值。

今天解决的问题是在jsp页面中给css定义的label.error的类一个id,然后通过控制id的可见性来实现收起div时清除js的提示信息。具体如下:
在准备界面的函数中var label1 = document.getElementById("label1");

$(document).ready(function() {
$(".flipp .span4").click(function() {
$(this).parent().next().toggle();
$(this).parent().parent().prevAll().find(".panel").hide();
$(this).parent().parent().nextAll().find(".panel").hide();
var label1 = document.getElementById("label1");
label1.style.display="none";
})

然后在jsp相应的地方加入:

<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>

对于css定义的label.error类,可以使用$("label.error").removeAttr("style").attr("style", "display: none;");来实现如上的功能。而且,貌似也不用在地下相应的位置给label定义id值。

相关文章
  • js设置控件的隐藏与显示的两种方法 2015-03-15

    js设置控件的隐藏与显示,设置控件style的display和visibility属性就可以了,下面有个示例,需要的朋友可以参考下 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性. 当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"

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

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

  • Jquery实现控件的隐藏和显示实例 2013-12-06

    本篇文章主要是对Jquery实现控件的隐藏和显示实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu

  • 用js实现控件的隐藏及style.visibility的使用 2013-12-22

    用js控制控件的隐藏,使用style.visibility实现 ,具体代码如下,感兴趣的朋友可以参考下哈,希望对大家有所帮助 <!DOCTYPE html> <html> <body> <p id="p1">这是一段文本.</p> <input type="button" value="隐藏文本" onclick="document.getElementById('p1'

  • 浅析js设置控件的readonly与enabled属性问题 2015-04-04

    本篇文章是对js设置控件的readonly与enabled属性问题进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 如何用js设置控件的readonly和enabled属性? 我试过这样设置不行,text1为<input type=text id=text1> text1.readonly=true; 和 text1.enabled=true; 都不行,为什么??? 答案: disabled=flase; //小写 readOnly=true; //大写

  • js unicode 编码解析关于数据转换为中文的两种方法 2015-01-31

    这篇文章主要介绍了js unicode 编码解析关于数据转换为中文的两种方法,需要的朋友可以参考下 var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; 关于这样的数据转换为中文问题,常用的两种方法. 1. eval 解析 复制代码 代码如下: str = eval("'" + str + "'"); // "我是unicode编码" 2. unescape 解析 复制代码 代码如下

  • js读写cookie实现一个底部广告浮层效果的两种方法 2014-12-29

    使用js实现一个页面浮层效果,用js读写cookie来实现用户关闭广告的显示状态,下面有个不错的示例,感兴趣的朋友可以参考下 下面一个案例使用js实现一个页面浮层效果,并且通过两种方法使用js读写cookie来实现用户关闭广告的显示状态: 读者可以将下面代码复制到一个html文件试试效果:html的pre标签未两种js实现的方式 <!DOCTYPE HTML> <html> <head> <meta content="text/html;charset=

  • node.js向ejs模板发送数据的两种方法 2013-07-16

    node.js中向ejs模板发送数据有以下两种方法: 方法一. 示例代码: res.render('viewName',{name1:'value1', name2:'value2',...}); 语法: res.render(view, [locals], callback); 说明: view:为模板文件名 locals:为模板中所有变量的key-value的JSON数据 callback:为回调函数 弊端:此方法在给模板赋值时,必须一次性将模板里的所有变量都传值,否则会报错. 方法二. 示

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

    这篇文章主要介绍了,js中将控件隐藏的方法,以及display的属性,有需要的朋友可以参考一下 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或见,当style.display="none"或style.visibility=

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

    用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性,下面详细为大家介绍下具体的使用 用JavaScript隐藏控件的方法有两种,分别是通过设置控件的style的"display"和"visibility"属性.当style.display="block"或style.visibility="visible"时控件或

  • jquery设置控件位置的方法 2014-08-13

    这篇文章介绍了jquery设置控件位置的方法,有需要的朋友可以参考一下 纯JS写法: document.getElementById("child").style.left="800px"; document.getElementById("child").style.top="200px";*/ //offset()获取当前元素基于浏览的位置 var offsettop=$("#unamespan").o

  • js Calender控件使用详解 2014-03-27

    这篇文章主要介绍了js Calender控件使用详解,需要的朋友可以参考下 最近一直在赶项目.项目现在终于处于稳定的状态,只是修修改改.作为后台程序员的我真是苦逼啊,从web到手机端接口我都得写,杂七杂八的事情...这两天终于闲下来了,没事儿看了一下关于js日期的一些函数,突然想到了日历控件,于是试着写了一个,作为后台程序员的我水平有限,大家抱着学习的态度看看我写的这个例子吧... 首先一个常用的日期函数:Date(year,month,day) var date=new Date(); 获取年

  • JS分页控件 可用于无刷新分页 2014-08-11

    今天无意看到了这个分页控件,不过使用方法不是很清楚没有研究,.大家可以自行研究,里面的函数写法倒是不错,需要内容的结合 JS分页控件,可用于无刷新分页 function PagerBar(recordcount, pagesize, pageindex, showpagecount) { var NumberRegex = new RegExp(/^\d+$/); this.PageIndex = 1; //页索引,当前页 if (pageindex != null && NumberRe

  • android 设置控件的颜色字体的方法 2014-10-03

    这篇文章介绍了android 设置控件的颜色字体的方法,有需要的朋友可以参考一下 1.用代码设置控件的颜色: int b = getResources().getColor(R.drawable.blue);//得到配置文件里的颜色 mButton.setTextColor(b); 2.设置空间的字体: 方式一:mText.setTypeface(Typeface.createFromAsset(getAssets(),"fonts/HandmadeTypewriter.ttf"));

  • js获取控件位置以及不同浏览器中的差别介绍 2014-11-18

    js获取控件位置(坐标位置)在不同浏览器中的差别,在本文为大家详细介绍下,感兴趣的朋友可以参考下 //获取坐标位置 function getpos(e) { var t=e.offsetTop; var l=e.offsetLeft; var height=e.offsetHeight; while(e=e.offsetParent) { t+=e.offsetTop; l+=e.offsetLeft; } } 假设 obj 为某个 HTML 控件. obj.offsetTop 指 obj 距离

  • 一个简单的JS时间控件示例代码(JS时分秒时间控件) 2014-06-16

    这篇文章主要介绍了一个简单的JS时间控件示例代码(JS时分秒时间控件).需要的朋友可以过来参考下,希望对大家有所帮助 自己在网上找了半天没找到只有 "时分秒"的控件, 就自己做了个,发在这里方便有人用到 鼠标点击 后 的效果 SetTime.js /**//*********************************** * 使用说明: * 首先把本控件包含到页面 * <script src="XXX/setTime.js" type="tex

  • 简约JS日历控件 实例代码 2014-10-05

    这篇文章介绍了一款简约JS日历控件的全部代码,有需要的朋友可以参考一下 运行结果如下: <script type="text/javascript" language="javascript"> function choose_date_czw(date_id,objtd){ if(date_id=="choose_date_czw_close"){ document.getElementByIdx_x_x("choose_

  • js 判断控件获得焦点的示例代码 2014-10-24

    本篇文章主要是对js 判断控件获得焦点的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 JS判断一个对象已获得焦点document.activeElement.tagName //tagName 标签名 实例:判断body获得光标时关闭输入法. var act = document.activeElement.tagName.toLowerCase(); if(act.indexOf("body") != -1 || act.indexOf("html&qu

  • 使用js判断控件是否获得焦点 2015-01-19

    本篇文章主要是对使用js判断控件是否获得焦点的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 使用JS获取具有焦点控件的ID: $("#textID").click(function(){ var act = document.activeElement.id; if(act == "textID" ){ alert("true"); }else{ alert("false"); } } ); 使用jquery获

  • JS 日历控件(蓝色) 2015-02-26

    超漂亮的JS日历控件,代码有些复杂. 超漂亮的JS日历控件 333444 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]