在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。
下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。
[html]
<html>
<head>
<title>test</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
.titlediv{background-color:#eee;color:white;font-weight:bold;padding:10px;cursor:pointer }
.contentdiv{border:3px solid blue;height:100px;padding:10px; }
</style>
<script type="text/javascript">
function toggle(divid){
var odiv = document.getElementById(divid);
odiv.style.display=(odiv.style.display=="none")?"block":"none";
}
function showhide(divid){
var odiv = document.getElementById(divid);
odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible";
}
</script>
</head>
<body >
<div class="titlediv" onclick="toggle('divContetn1')">click here</div>
<div class="contentdiv" id="divContetn1">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="toggle('divContetn2')">click here</div>
<div class="contentdiv" id="divContetn2">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="showhide('divContetn3')">click here</div>
<div class="contentdiv" id="divContetn3">this is some content to show and hide
</div>
<p> </p>
<div class="titlediv" onclick="showhide('divContetn4')">click here</div>
<div class="contentdiv" id="divContetn4">this is some content to show and hide
</div>
</body>
weitinting
- 浏览: 61724 次
- 性别:
- 来自: 西安
-
最新评论
-
chenzheng8975：
豁然开朗。。。。
XHTML MP 页面结构 -
chenzheng8975：
受教了。。。。感谢！
wap学习开发道路
相关推荐
### Display与Visibility的区别 在网页布局与样式设计中，`display`与`visibility`属性是控制元素显示状态的两种常用方式。尽管它们都能达到隐藏或显示元素的目的，但两者之间存在本质的区别。本文将深入探讨这两种...
与此不同，`visibility` 属性只影响元素的可见性，不会影响布局。当 `visibility` 设为 `hidden` 时，元素虽然不可见，但仍然占用原有的空间。这在需要隐藏元素但保持其布局位置时非常有用： ```css .invisible { ...
在网页布局和样式设计中，`display` 和 `visibility` 是两个非常重要的CSS属性，它们都能用来控制元素的可见性，但实现方式和效果大不相同。本篇文章将深入探讨两者之间的区别，并通过示例来具体说明。 首先，`...
2. `visibility:hidden`：与`display:none`不同，`visibility:hidden`的元素仍然占据原有的空间，周围的元素不会移动。尽管元素内容不可见，但元素本身是存在的，可以被点击。由于元素的尺寸保持不变，因此不会触发...
在CSS中，`display`和`visibility`两个属性都是用于控制元素的可见性，但它们之间存在着本质的区别。首先，`visibility`属性主要用于决定元素是否可见，而不改变元素的布局。当`visibility`设置为`hidden`时，元素的...
总结来说，`display` 和 `visibility` 的主要区别在于： 1. `visibility` 只改变元素的可见性，不改变布局，隐藏后仍保留空间。 2. `display` 不仅改变可见性，还影响布局，隐藏后不再占用空间。 在实际应用中，...
总之，`display`和`visibility`都是控制元素可见性的工具，但它们的核心区别在于是否保留元素的布局空间。`visibility:hidden`仅隐藏元素内容，保留空间；而`display:none`则同时移除元素及其占用的空间。了解这两者...
style.visibility 属性也用于控制元素是否显示，但是它与 style.display 不同的是，它不会影响文档流的布局。当设置 style.visibility = "hidden" 时，元素将被隐藏，但是它在文档流中的位置仍然保留着，不会被后续...
11_元素的隐藏-display-visibility
CSS中display和visibility属性都是用于控制页面元素的显示与隐藏的，但是它们在实现方式和效果上有本质的区别。理解这两个属性的不同对于Web前端开发至关重要，尤其是在进行动态网页制作时，合理使用这些属性能够更...
在CSS中，`display`和`visibility`两个属性都是用于控制元素在页面上的显示状态，但它们的作用方式和效果有着显著的区别。 `display`属性主要影响元素的布局和类型。它有多种不同的值： 1. `block`：将元素转换为...
为了更好地理解display和visibility的差别，我们可以观察示例页面上div元素的表现。当使用display属性控制时，点击"DIV切换"按钮，相应的div元素会在显示与不显示之间切换，并且如果元素被隐藏，那么它不会占用任何...
通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下: <html> <head> <title>HTML元素的显示与隐藏控制</title> [removed] function showAndHidden1(){ ...
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
在style属性中，有两个常用的属性可以用来控制元素的显示与隐藏：visibility和display。尽管这两个属性的目的相似，即控制元素的可见性，但它们在实现上有着明显的区别，这些区别对页面布局和元素的交互性有深远的...