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

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

visibility:visible
/*元素可见,默认值*/
visibility:hidden
/*元素不可见,但仍然为其保留相应的空间*/
visibility:collapse
/*只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用 在table以外的对象上则表现为hidden。*/
visibility:inherit
/*继承上级元素的visibility值。*/
再来看一下display对应的几个属性的介绍:

display:none
/*元素不可见,并且不为其保留相应的位置*/
display:block
/*表现为一个块级元素(一般情况下独占一行)*/
display:inline
/*表现为一个行级元素(一般情况下不独占一行)*/

visibility和display中不可见的区别

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

如何运用?

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

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

实践出真知

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

function ChangeReason() {
if (ccbChangeReason.value == "A 建设银行") {
checkbox1.style.visibility = "visible";
checkbox2.style.visibility = "visible";
checkbox3.style.visibility = "visible";
lblElseReason.style.visibility = "hidden";
txtcElseReason.style.visibility = "hidden";
}
if (ccbChangeReason.value == "B 工商银行") {
checkbox1.style.visibility = "hidden";
checkbox2.style.visibility = "hidden";
checkbox3.style.visibility = "hidden";
lblElseReason.style.visibility = "hidden";
txtcElseReason.style.visibility = "hidden";
}
if (ccbChangeReason.value == "C 农业银行") {
checkbox1.style.visibility = "hidden";
checkbox2.style.visibility = "hidden";
checkbox3.style.visibility = "hidden";
lblElseReason.style.visibility = "visible";
txtcElseReason.style.visibility = "visible";
}
}

http://www.cnblogs.com/chunye39/archive/2011/04/21/2023120.html

表单元素(控件)不可见,你用visibility还是display?(转)的更多相关文章

  1. 关于Web项目里的给表单验证控件添加结束时间不得小于开始时间的验证方法,日期转换和前台显示格式之间,还有JSON取日期数据格式转换成标准日期格式的问题

    项目里有些不同页面间的日期显示格式是不同的, 第一个问题: 比如我用日期控件WdatePicker.js导包后只需在input标签里加上onClick="WdatePicker()" ...

  2. 【ASP.NET 基础】表单和控件

    1.HTML表单的提交方式 对于一个普通HTML表单来说,它有两个重要的属性:action 和 method.action属性指明当前表单提交之后由哪个程序来处理,这个处理程序可以是任何动态网页或者 ...

  3. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  4. 详解Ajax请求(三)——jQuery对Ajax的实现及serialize()函数对于表单域控件参数提交的使用技巧

    原生的Ajax对于异步请求的实现并不好用,特别是不同的浏览器对于Ajax的实现并不完全相同,这就意味着你使用原生的Ajax做异步请求要兼顾浏览器的兼容性问题,对于java程序员来讲这是比较头疼的事情, ...

  5. [WPF自定义控件库]简单的表单布局控件

    1. WPF布局一个表单 <Grid Width="400" HorizontalAlignment="Center" VerticalAlignment ...

  6. HTML之表单类控件、图像类元素的CSS特别样式汇总

    前言 记录下开发过程中一些特殊表单控件(input.textarea.select等)的样式控制 input 取消光标聚焦时,输入框的外延边框 input:focus{ outline:none } ...

  7. 表单验证控件Verify.js

    自己工作常用到表单录入验证,就顺手写了一个验证控件,刚开始写得很烂.多年后翻出来,又优化了一下,增加了一些功能.拿出来分享分享. 主要功能就是表单的录入验证. * 1.当录入框必填时,在控件后生成红色 ...

  8. Js表单验证控件(使用方便,无需编码)-01使用说明

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  9. Js表单验证控件

    演示地址:http://weishakeji.net/Utility/Verify/Index.htm    开源地址:https://github.com/weishakeji/Verify_Js ...

  10. jeecg表单页面控件权限设置(请先看官方教程,如果能看懂就不用看这里了)

    只是把看了官方教程后,觉得不清楚地方补充说明一下: 1. 2. 3. 4.用"jeecgDemoController.do?addorupdate"这个路径测试,不出意外现在应该可 ...

随机推荐

  1. mac下安装伪分布hadoop2.6.0和hbase1.0.1.1

    1.安装JDK,我安装的是java1.7 2.创建管理员账户 3.安装ssh服务(如果已有跳过此步) 4.ssh无密码验证登陆 以上过程略,可参考ubuntu下安装hadoop一文. 5.下载并解压h ...

  2. CSS同时使用背景图片和背景颜色

    background:url(../images/bg.jpg) #F3EFE5 no-repeat ;

  3. CentOS 7.4中firewall防火墙详解和配置以及切换为iptables防火墙

    转载:https://blog.csdn.net/xlgen157387/article/details/52672988 一.firewall介绍 CentOS 7中防火墙是一个非常的强大的功能,在 ...

  4. 【模板】NTT

    NTT模板 #include<bits/stdc++.h> using namespace std; #define LL long long const int MAXL=22; con ...

  5. 【angularJS】简介

    简介 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表达式 绑 ...

  6. docker swarm mode routing mesh 使用

    Docker Engine swarm mode makes it easy to publish ports for services to make them available to resou ...

  7. Wordpress主题站

    深度剖析WordPress主题结构 http://down.chinaz.com/try/201106/640_1.htm wordpress工作原理 http://blog.csdn.net/liu ...

  8. jenkins忘记密码如何处理?

    一.admin密码未更改情况 1.进入\Jenkins\secrets目录,打开initialAdminPassword文件,复制密码: 2.访问Jenkins页面,输入管理员admin,及刚才的密码 ...

  9. Mongodb简单介绍安装

    具体详细内容,请查阅 Mongodb官方文档 一.简单介绍 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服务器性能. M ...

  10. protobuf接口调用报错:java.nio.charset.MalformedInputException: Input length = 1

    使用protobuf定义的接口api发起http请求报错,日志如下: [-- ::] DEBUG AbstractPool: - server updated, node=, server={ nod ...