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 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
用Javascript获取页面元素的具体位置
Dec 09 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
Js操作树节点自动折叠展开的几种方法
May 05 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JS中递归函数
Jun 17 Javascript
解析Javascript单例模式概念与实例
Dec 05 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
JS将unicode码转中文方法
May 08 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
微信小程序分包加载代码实现方法详解
Sep 23 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
使用jquery与图片美化checkbox和radio控件的代码(打包下载)
2010/11/11 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
THREE.JS入门教程(3)着色器-下
2013/01/24 Javascript
对table和ul实现js分页示例分享
2014/02/24 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
详解Vue监听数据变化原理
2017/03/08 Javascript
jQuery实现frame之间互通的方法
2017/06/26 jQuery
详解如何在Vue项目中发送jsonp请求
2019/10/25 Javascript
VUE 直接通过JS 修改html对象的值导致没有更新到数据中解决方法分析
2019/12/02 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
在Linux上安装Python的Flask框架和创建第一个app实例的教程
2015/03/30 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python进行TCP端口扫描的实现
2018/12/21 Python
python实现石头剪刀布程序
2021/01/20 Python
python使用参数对嵌套字典进行取值的方法
2019/04/26 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
如何使用Python 打印各种三角形
2019/06/28 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
django框架forms组件用法实例详解
2019/12/10 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
毕业生个人的求职信范文
2013/12/03 职场文书
采购员的工作职责
2013/12/26 职场文书
舞蹈专业大学生职业规划范文
2014/03/12 职场文书
写景作文评语集锦
2014/12/25 职场文书
目标责任书格式范文
2015/05/11 职场文书
道歉的话语大全
2015/05/12 职场文书
投资申请报告
2015/05/19 职场文书
跳高加油稿
2015/07/21 职场文书
2016年感恩节活动总结大全
2016/04/01 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
剑指Offer之Java算法习题精讲二叉树专项训练
2022/03/21 Java/Android