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


Posted in Javascript onAugust 21, 2014

用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中的107个基础知识收集整理 推荐
Mar 29 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
javascript实现的多个层切换效果通用函数实例
Jul 06 Javascript
JavaScript简单下拉菜单实例代码
Sep 07 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
微信小程序实现多选功能
Nov 04 Javascript
如何让node运行es6模块文件及其原理详解
Dec 11 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
JS不能跨域借助jquery获取IP地址的方法
Aug 20 #Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 #Javascript
jQuery CSS()方法改变现有的CSS样式
Aug 20 #Javascript
JavaScript检查某个function是否是原生代码的方法
Aug 20 #Javascript
使用时间戳解决ie缓存的问题
Aug 20 #Javascript
js中使用replace方法完成某个字符的转换
Aug 20 #Javascript
js 动态修改css文件用到了cssRule
Aug 20 #Javascript
You might like
一个简单的php实现的MySQL数据浏览器
2007/03/11 PHP
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
php生成html文件方法总结
2014/12/01 PHP
PHP+Ajax无刷新带进度条图片上传示例
2017/02/08 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
PHP数组基本用法与知识点总结
2020/06/02 PHP
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
H5移动端适配 Flexible方案
2016/10/24 Javascript
浅谈Node.js CVE-2017-14849 漏洞分析(详细步骤)
2017/11/10 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
2018/06/20 jQuery
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
微信小程序实现日历功能
2018/11/27 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
基于Vue+Webpack拆分路由文件实现管理
2020/11/16 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
[03:26]《DAC最前线》之EG经理自述DOTA2经历
2015/02/02 DOTA
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
使用memory_profiler监测python代码运行时内存消耗方法
2018/12/03 Python
python实现桌面壁纸切换功能
2019/01/21 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
运动会解说词50字
2014/01/18 职场文书
幼儿教师师德师风演讲稿
2014/08/22 职场文书
运动会入场词
2015/07/18 职场文书
2015领导干部廉洁自律工作总结
2015/07/23 职场文书
mongodb数据库迁移变更的解决方案
2021/09/04 MongoDB
JS实现数组去重的11种方法总结
2022/04/04 Javascript