西西软件园多重安全检测下载网站、值得信赖的软件下载站!
软件
软件
文章
搜索

首页编程开发其它知识 → 表单元素(控件)不可见属性“visibility”和“display”分析

表单元素(控件)不可见属性“visibility”和“display”分析

相关软件相关文章发表评论 来源:西西整理时间:2011/4/21 14:18:16字体大小:A-A+

作者:西西点击:171次评论:0次标签: 表单元素

  • 类型:滤镜插件大小:7.6M语言:中文 评分:6.6
  • 标签:3d模型3dmax插件大全
立即下载

表单元素(控件)不可见,你用visibility还是display?

属性大比拼:visibility和display的介绍

今天在做一个表单时涉及到这方面,当选中相应的选项后设置相应的几个元素(控件可见或不可见),后来还是用了visibility来实现。我们先来看下visibility对应的几个属性的介绍:


1 visibility:visible
2 /*元素可见,默认值*/
3 visibility:hidden
4 /*元素不可见,但仍然为其保留相应的空间*/
5 visibility:collapse
6 /*只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用
7
8 在table以外的对象上则表现为hidden。*/
9 visibility:inherit
10 /*继承上级元素的visibility值。*/



1 再来看一下display对应的几个属性的介绍:
2
3 display:none
4 /*元素不可见,并且不为其保留相应的位置*/
5 display:block
6 /*表现为一个块级元素(一般情况下独占一行)*/
7 display:inline
8 /*表现为一个行级元素(一般情况下不独占一行)*/

不好意思,我要华丽丽地加上一条链接,让复制粘贴不注明文章出处的人帮我做个外链,抱歉。http://www.chunye39.com   纯野原创博客

visibility和display中不可见的区别

估计看到这里,你也就大概知道了两者的区别了吧。哈哈。虽然Visibility和Display属性都可以隐藏一个元素,但它们之间的不同点在于visibility:hidden在隐藏一个元素的同时仍然在页面上为该元素保留所需的空间,而display:none则表现得像把元素从页面里删除了,在页面上看不出该元素还存在着。

如何运用?

区别知道了,但如何运用起来呢。在页面开发中,表单元素(控件)不可见,你用visibility还是display?

下面说一个通用的方法。如果你想隐藏某元素,但在页面上保留该元素的空间的话,你应该使用visibility: hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用 display: none 。

实践出真知

ok,最后献上下午我写的这个简单的js小函数来做为实践总结。这个小函数的功能是,当用户选择了下拉列表框后,获取下拉列表框的值,根据这个下拉框的值来判断某些元素(控件)可见或是不可见。很简单滴。。。


1 function ChangeReason() {
2 if (ccbChangeReason.value == "A 建设银行") {
3 checkbox1.style.visibility = "visible";
4 checkbox2.style.visibility = "visible";
5 checkbox3.style.visibility = "visible";
6 lblElseReason.style.visibility = "hidden";
7 txtcElseReason.style.visibility = "hidden";
8 }
9 if (ccbChangeReason.value == "B 工商银行") {
10 checkbox1.style.visibility = "hidden";
11 checkbox2.style.visibility = "hidden";
12 checkbox3.style.visibility = "hidden";
13 lblElseReason.style.visibility = "hidden";
14 txtcElseReason.style.visibility = "hidden";
15 }
16 if (ccbChangeReason.value == "C 农业银行") {
17 checkbox1.style.visibility = "hidden";
18 checkbox2.style.visibility = "hidden";
19 checkbox3.style.visibility = "hidden";
20 lblElseReason.style.visibility = "visible";
21 txtcElseReason.style.visibility = "visible";
22 }
23 }

  • 3d模型
  • 3dmax插件大全
3d模型
(13)3d模型
如今电子商务发展势头迅猛,各种商品广告在网络上铺天盖地,怎样让自己的商品能更全面更显眼的展现给消费者成了所有商家宣传展示自己商品的重中之重。传统的二维照片显然已经无法满足这一要求,于是商品展示技术便开始步入人们的视野。模型的展示,用户不仅仅可以更为清晰直观地浏览广告内容,其互动性以用户为核心,任意视角全方位浏览欣赏,同时根据要求制作用户可直观地参与内容,其广告效果可想而知。这里给大家收集整理了很多...更多>>

相关评论

阅读本文后您有什么感想? 已有人给出评价!

  • 8 喜欢喜欢
  • 3 顶
  • 1 难过难过
  • 5 囧
  • 3 围观围观
  • 2 无聊无聊

热门评论

最新评论

发表评论 查看所有评论(0)

昵称:
表情: 高兴 可 汗 我不要 害羞 好 下下下 送花 屎 亲亲
字数: 0/500 (您的评论需要经过审核才能显示)

表单元素(控件)不可见属性“visibility”和“display”分析

(常春藤模型生成插件)Guruware Ivy 0.92b for 3ds Max7~2010 32bit标签:3d模型3dmax插件大全

(常春藤模型生成插件)Guruware Ivy 0.92b for 3ds Max7~2010 32bit