小编给大家分享一下display和visibility有哪些区别，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
属性大比拼：visibility和display的介绍
在做一个表单时涉及到这方面，当选中相应的选项后设置相应的几个元素（控件可见或不可见），后来还是用了visibility来实现。我们先来看下visibility对应的几个属性的介绍：
visibility:visible
visibility:hidden
visibility:collapse
visibility:inherit
再来看一下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"; }以上是“display和visibility有哪些区别”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
