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

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

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索控件
, 显示
隐藏
javascript 隐藏控件、javascript 隐藏元素、javascript 隐藏div、javascript 显示隐藏、javascript日历控件,以便于您获取更多的相关知识。

时间: 2024-12-15 03:14:13

js设置控件的隐藏与显示的两种方法_javascript技巧的相关文章

JS实现n秒后自动跳转的两种方法_javascript技巧

本文实例为大家分享了JS实现n秒后自动跳转的两种方法,供大家参考,具体内容如下 第一种使用SetInterval: $(function () { setInterval(ChangeTime, 1000); }); function ChangeTime() { var time; time = $("#time").text(); time = parseInt(time); time--; if (time <= 0) { window.location.href = &q

js unicode 编码解析关于数据转换为中文的两种方法_javascript技巧

复制代码 代码如下: var str = "\\u6211\\u662Funicode\\u7F16\\u7801"; 关于这样的数据转换为中文问题,常用的两种方法. 1. eval 解析 复制代码 代码如下: str = eval("'" + str + "'"); // "我是unicode编码" 2. unescape 解析 复制代码 代码如下: str = unescape(str.replace(/\\u/g, &q

js读写cookie实现一个底部广告浮层效果的两种方法_javascript技巧

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

JS控制HTML元素的显示和隐藏的两种方法_javascript技巧

利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

js控制容器隐藏出现防止样式变化的两种方法_javascript技巧

方法一: 复制代码 代码如下: document.getElementById("控件ID").style.visibility="hidden"; document.getElementById("控件ID").style.visibility="visible"; 方法二: 复制代码 代码如下: document.getElementById("控件ID").style.display="no

JS实现星星评分功能实例代码(两种方法)_javascript技巧

一.方法1 1.用到图片 2.结构和样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> ul { padding-left: 0; overflow: hidden; } ul li { float: left; list-style: no

JS实现至少包含字母、大小写数字、字符的密码等级的两种方法_javascript技巧

本文实例讲述了JS实现至少包含字母.大小写数字.字符的密码等级的两种方法.分享给大家供大家参考.具体如下: 前言 密码,如果设置的太简单,很容易就被攻破,所以很多网站将密码设置的要求设置的挺严格,一般是字母.数字.字符3选2,区分大小写.对于设置得太简单的密码,予以错误提示.或者予以密码等级(低中高)显示,让用户设置高级密码.那如何利用JS实现呢? 实现代码如下: function passwordLevel(password) { var Modes = 0; for (i = 0; i <

JS动态创建元素的两种方法_javascript技巧

本文为大家分享了js创建元素的两种方法供大家参考,具体内容如下 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态创建元素(创建元素 => 找到父级元素 => 在指定位置插入元素) 一.字符串拼接形式     为了更好的理解,设定一个应用场景.     随机生成一组数字,将这组数据渲染为条形图的形式,放在div[id="container"]中,如下图

js获取元素到文档区域document的(横向、纵向)坐标的两种方法_javascript技巧

获取页面中元素到文档区域document的横向.纵向坐标的两种方法及其比较 在js控制元素运动的过程中,对于页面元素坐标位置的获取是经常用到的,这里主要总结下两种方法: 一:通过叠加元素对象和它的offsetParent(如果存在)的offsetLeft/offsetTop属性来实现 在阅读javascript高级程序设计第三版DOM部分时,了解到要获取某个元素在页面上的偏移量,需要将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,一直循环直至根元素