定义
在W3School上这两种CSS属性是这样定义的:
1.visibility 属性规定元素是否可见
2.display 属性规定元素应该生成的框的类型。
如果你想隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
- visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- 所以，display:none 使得整个元素包括其占据的空间均隐藏，而visibility:hidden 仅仅会隐藏元素但是仍然会保留元素所占据的区域
- 根据具体情况来选择使用，一般来说 display:none 更加常用。
下面是两种方式的示例:
1.Display:None; 方式隐藏与显示元素
这是一个文本段落，点击按钮用Display样式隐藏与显示它
这是另外一个段落
2.Visibility方式隐藏与显示元素
这是一个文本段落，点击按钮隐藏与显示它
这是另外一个段落
你会不难看出这两种方式的区别和差异。
示例的相关代码
<p>1.Display:None; 方式隐藏与显示元素</p>
<div id="displayMethod" style="display: inline;"><strong>这是一个文本段落，点击按钮用Display样式隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='none'">Display隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('displayMethod').style.display='inline'">Display显示</button></p>
<p>2.Visibility方式隐藏与显示元素</p>
<div id="visMethod" style="visibility: visible"><strong>这是一个文本段落，点击按钮隐藏与显示它</strong>
</div>
<div>这是另外一个段落</div>
<p><button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='hidden'">Visibility隐藏</button><br/>
<button class="btn" type="button" onclick="document.getElementById('visMethod').style.visibility='visible'">Visibility显示</button></p>
文章评论