45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网络编程 > CSS教程 >

CSS中Visibility和Display的区别

电脑软硬件应用网 45IT.COM 时间:2009-09-16 13:00 作者:素象
  CSS中的visibilitydisplay两个属性很容易被混淆,因为它们看起来是做同样的事情,但实际上,这两个属性是完全不同的。 visibility属性用来设置一个给定的元素是否显示(visibility="visible|hidden"),但是,虽然一个元素的visibility被设置为hidden,但是该元素仍然会占据设计的位置:
<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">
This example displays text that toggles between a visibility of 'visible' and 'hidden'. 
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>

<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">
This example displays text that toggles between a visibility of 'visible' and 'hidden'. 
Note the behavior of the next line.</div><div>This second line shouldn't
move, since visibility retains its position in the flow</div>

   

注意如果display属性没有被明确设置,将默认被设置为该类元素的常用值。明显地,两个属性中display属性更有用,多数情况下在隐藏文字的时候要将相关的元素做相应的调节(例如树结构)。
        注意当一个元素被隐藏时,不能接受任何事件,因此上例中当<div>被隐藏后,不能再接受鼠标点击事件,所以再点击该控件位置不能再次显示控件。Display属性的作用则有所不同,visibility隐藏元素,但是却为该元素预留位置,而display实际是设置该元素的属性。例如任何display设置为block的元素都被视为一个单独的块儿,这时的<SPAN>会象<DIV>一样工作,而当display属性设置为inline时该元素将变成一个单列的元素,这时的<DIV>也会象<SPAN>一样工作。最后,如果一个元素的display属性被设置为none,那么这个元素实际上将彻底从输出流中去除,并且其后的所有元素将提到前面对的位置。
<script language="JavaScript">
    
function toggleDisplay(me){
        
if (me.style.display=="block")
{
            me.style.display
="inline"
;
            alert(
"Text is now 'inline'."
);
            }

        
else {
            
if (me.style.display=="inline")
{
                me.style.display
="none"
;
                alert(
"Text is now 'none'. It will reappear in three seconds."
);
                window.setTimeout(
"blueText.style.display='block';",3000,"JavaScript"
);
                }

            
else {
                me.style.display
="block"
;
                alert(
"Text is now 'block'."
);
                }

            }

        }

</script>
 
<div>Click on the <span id="blueText" onclick="toggleDisplay(this)" 
style
="color:blue;position:relative;cursor:hand;">blue text</span>
 to 
see how it affects the flow.
</div>


顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
推荐知识