<div style="width:100px;height:100px;background:red;visibility:hidden"></div>//对象隐藏后,还有占有相应的空间大小
<div style="width:100px;height:100px;background:red;display:none"></div>//对象隐藏后,对象不占任何空间 CSS中的visibility和display两个属性很容易被混淆,因为它们看起来是做同样的事情,但实际上,这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden"),但是,虽然一个元素的visibility被设置为hidden,但是该元素仍然会占据设计的位置:hidden仅仅是隐藏, 但是他的位置会保留 注意如果display属性没有被明确设置,将默认被设置为该类元素的常用值。明显地,两个属性中display属性更有用,多数情况下在隐藏文字的时候要将相关的元素做相应的调节(例如树结构)。none表示完全没有, 当前的位置会被后面的元素补上来
使用 visibility:hidden属性会使对象不可见,但该对象在网页所占的空间没有改变(看不见但摸得到),等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失(看不见也摸不到)。 <script language="JavaScript"> function toggleVisibility(me){ if (me.style.visibility=="hidden"){ me.style.visibility="visible"; } else { me.style.visibility="hidden"; } }</script> <div onclick="toggleVisibility(this)" style="position:relative">
时间: 2024-09-30 11:28:11