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

开发 后端
display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。在做表单元素不可见上,你用你用visibility还是display?本文给你讲解。

本节通过向大家描述displayvisibility的差别,来向大家说明在表单元素(控件)不可见上,你应该用visibility还是display。虽然它们都可以达到隐藏页面元素的目的,但它们的区别在于如何回应正常文档流。

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

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

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

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

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";  

【编辑推荐】

  1. DIV中display和visibility属性差别
  2. CSS样式中Display与Visibility属性的区别
  3. CSS DIV中Visibility和Display属性用法区别
  4. 技术分享 使用CSS visibility属性控制内容显示
责任编辑:于铁 来源: 博客园
相关推荐

2010-09-14 13:05:10

VisibilityDisplayCSS DIV

2023-11-27 00:48:46

displayvisibility

2012-03-08 11:23:09

jQuery Mobi

2010-09-14 13:11:43

DIVdisplayvisibility

2010-09-16 09:58:44

CSS display

2010-09-07 16:21:37

CSSDisplayVisibility

2010-09-16 10:29:47

DisplayVisibilityCSS

2013-10-21 15:20:27

Linux命令cat 命令

2015-02-10 11:15:46

Android 5.1Google

2015-02-05 09:29:25

Android 5.1

2018-10-12 15:20:19

前端css3css

2010-09-10 15:16:51

CSSdisplay

2021-03-08 08:18:53

onStar Activity 界面

2021-01-29 09:58:55

MySQL数据库

2022-07-16 10:02:54

gedit文本编辑器Linux

2010-07-08 13:38:42

SQL Server不

2010-09-02 15:48:47

CSSvisibility属

2021-07-14 14:24:14

Python密码程序员

2015-07-17 10:07:33

JAVA数字水印

2020-08-26 09:58:56

AI 数据人工智能
点赞
收藏

51CTO技术栈公众号