posts - 195, comments - 34, trackbacks - 0, articles - 1

div的visibility和display属性的区别

Posted on 2010-09-14 13:47 小强摩羯座 阅读(1025) 评论(0)  编辑  收藏 所属分类: Java
•  前者:看见与不看见,但是位置保留。
      •  后者处理与位置有关:block, inline, 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">

    第一行文本将会触发
"hidden""visible"属性,注意第二行的变化。

    
</DIV>

    
<DIV>因为visibility会保留元素的位置,所以第二行不会移动.</DIV>

    
<script language="javascript">

    function toggleDisplay(me){

    
if(me.style.display=="block"){

    me.style.display
="inline";

    alert(
"文本现在是:'inline'.");

    }

    
else{

    
if(me.style.display=="inline"){

    me.style.display
="none";

    alert(
"文本现在是:'none'.3秒钟后自动重新显示。");

    window.setTimeout(
"blueText.style.display='block';",

    
3000,"javascript");

    }

    
else{

    me.style.display
="block";

    alert(
"文本现在是:'block'.");

    }

    }

    }

    
</script>

    
<DIV><span id="blueText"

    onclick
="toggleDisplay(this)"

    style
="color:blue;position:relative;cursor:hand;">

    蓝色
</span>文字上点击来查看效果.</DIV>



只有注册用户登录后才能发表评论。


网站导航: