记录一下Display与Visibility的区别,用下面的例子看下效果就可以了。
1.Display
display被设置为block时显示,设置为none时元素实际上就从页面中被移走,它下面所在的元素就会被自动跟上填充
<script language="JavaScript">
function testDisplay(me){
if (me.style.display=="block"){
me.style.display="none";
}
else {
me.style.display="block";
}
}
</script>
111111111
<div onclick="testDisplay(this)">查看display效果</div>
22222222
2.Visibility
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示,
visible表示显示,hidden表示隐藏。当visibility被设置为"hidden"的时候,元素虽然被隐藏了,但它仍然占据它原来所在的位置。
<script language="JavaScript">
function testVisibility(me){
if (me.style.visibility=="hidden"){
me.style.visibility="visible";
}
else {
me.style.visibility="hidden";
}
}
</script>
33333333
<div onclick="testVisibility(this)">查看visibility效果</div>
444444444
分享到:
相关推荐
display与visibility的区别
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结: height:0和overflow:hidden的组合
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none,visibility为hidden时,元素都会不见。不过其还有不同之处。 display会将元素隐藏掉,并且位置不再被占据,而...
visibility属性用来确定元素是显示还是隐藏,这用visibility="visible|hidden"来表示, visible表示显示, ...display属性就有一点不同了。 none隐藏(元素消失),可恢复 inline,block显示 1、displ
本文主要介绍了display和visibility的区别。具有很好的参考价值。下面跟着小编一起来看下吧
NULL 博文链接:https://johnson-gong.iteye.com/blog/2152336
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的,这用visibility="visible|hidden"来表示(visible表示显示,...
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素...
JS中style.display和style.visibility的区别实例说明.docx
通过下面的例子了解display和visibility的区别,简单的例子代码如下: 复制代码代码如下: <html> <head> <title>HTML元素的显示与隐藏控制</title> [removed] function showAndHidden1(){ ...
Display的属性值 block:/*表现为一个块级元素(一般情况下独占一行)*/当display被设置为block(块)时,容器中所有的元素将会被当作一个单独的块,就像元素一样,它会在那个点被放入到页面中。(实际上你可以设置的...
前言: 在使用css隐藏栏位或物件的时候, 常常会使用到display:none和visibility:hidden这两个属性, 但却很容易分不清楚这两个的差别, 或是乾脆同时使用两种属性,来确保物件一定被隐藏, 其实我们可以很简单的来...
通过下面的例子了解display和visibility的区别,简单的例子代码如下: 复制代码代码如下: <html> <head> <title>HTML元素的显示与隐藏控制</title> [removed] function showAndHidden1(){ ...
.imgbox { float:left; text-align:center; width:120px;...CSS Display(显示) 与 Visibility(可见性) display属性设置一个元素应如何显示,visibility属性指定一个元素应可见还是隐藏。 Box 1 Box