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

 

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

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

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


visibility:visible
/*元素可见,默认值*/
visibility:hidden
/*元素不可见,但仍然为其保留相应的空间*/
visibility:collapse
/*只对table对象起作用,能移除行或列但不会影响表格的布局。如果这个值用

在table以外的对象上则表现为hidden。*/
visibility:inherit
/*继承上级元素的visibility值。*/


再来看一下display对应的几个属性的介绍:

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


 

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


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

No related posts.

此条目发表在 代码人生 分类目录,贴了 , , , 标签。将固定链接加入收藏夹。

表单元素(控件)不可见,你用visibility还是display?》有 6 条评论

  1. 创享生活 说:

    对于技术文,表示友情支持。哈哈

  2. 玎蕾 说:

    支持,不错哦

  3. 七七 说:

    纯围观支持。!

  4. 遵义博客 说:

    我不是搞技术的 我是来灌水的

  5. 等身抱抱 说:

    楼主写的这篇文章太好了!真的学到好东西。