• 前者:看見與不看見,但是位置保留。
• 后者處理與位置有關: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>